微信小程序?qū)崿F(xiàn)小型計(jì)算器
更新時(shí)間：2022年09月09日 16:23:04 作者：richest_qi
這篇文章主要為大家詳細(xì)
介紹了微信小程序?qū)崿F(xiàn)小型計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
介紹了微信小程序?qū)崿F(xiàn)小型計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)小型計(jì)算器的具體代碼，供大家參考，具體內(nèi)容如下
app.js
// app.js
App({
? onLaunch() {
? },
? REGEXP:/^[\+\-×÷]$/
})app.wxss
/**app.wxss**/
.container {
? height: 100%;
? display: flex;
? flex-direction: column;
? align-items: center;
? justify-content: space-between;
? padding: 200rpx 0;
? box-sizing: border-box;
}?index.html
<!--index.wxml-->
<view class="result">
? <view class="result-express">{{express}}</view>
? <view class="result-value">{{result}}</view>
</view>
<view class="btns">
? <view class="item">
? ? <view class="reset" hover-class="bg" bindtap="reset">C</view>
? ? <view class="devide" hover-class="bg" bindtap="clickNumBtn" data-val="7">7</view>
? ? <view class="multiply" hover-class="bg" bindtap="clickNumBtn" data-val="4">4</view>
? ? <view class="delete" hover-class="bg" bindtap="clickNumBtn" data-val="1">1</view>
? ? <view class="percent" hover-class="bg" bindtap="clickNumBtn" data-val="%">%</view>
? </view>
? <view class="item">
? ? <view class="devide" hover-class="bg" bindtap="clickOptBtn" data-val="÷">÷</view>
? ? <view class="eight" hover-class="bg" bindtap="clickNumBtn" data-val="8">8</view>
? ? <view class="five" hover-class="bg" bindtap="clickNumBtn" data-val="5">5</view>
? ? <view class="two" hover-class="bg" bindtap="clickNumBtn" data-val="2">2</view>
? ? <view class="zero" hover-class="bg" bindtap="clickNumBtn" data-val="0">0</view>
? </view>
? <view class="item">
? ? <view class="multiply" hover-class="bg" bindtap="clickOptBtn" data-val="×">×</view>
? ? <view class="nine" hover-class="bg" bindtap="clickNumBtn" data-val="9">9</view>
? ? <view class="six" hover-class="bg" bindtap="clickNumBtn" data-val="6">6</view>
? ? <view class="three" hover-class="bg" bindtap="clickNumBtn" data-val="3">3</view>
? ? <view class="dot" hover-class="bg" bindtap="clickNumBtn" data-val=".">.</view>
? </view>
? <view class="item">
? ? <view class="delete" hover-class="bg" bindtap="delete">DEL</view>
? ? <view class="subtract" hover-class="bg" bindtap="clickOptBtn" data-val="-">-</view>
? ? <view class="add" hover-class="bg" bindtap="clickOptBtn" data-val="+">+</view>
? ? <view class="equal" hover-class="bg" bindtap="equal">=</view>
? </view>
</view>index.wxss
/* index.wxss */
page{
? display: flex;
? flex-direction: column;
? height: 100%;
}
.result,.btns{
? flex: 1;
}
.result{
? background: #f3f6fe;
}
.btns{
? display: flex;
? flex-direction: row;
}
.item{
? flex-basis: 25%;
? display: flex;
? flex-direction: column;
}
.item view{
? flex-basis: 20%;
? border-bottom: 1rpx solid #eee;
? border-right: 1rpx solid #eee;
? display: flex;
? justify-content: center;
? align-items: center;
? box-sizing: border-box;
? font-size: 17pt;
}
.item view:first-child{
? color: rgb(41, 192, 252);
}
.item:last-child view{
? color: rgb(41, 192, 252);
}
.item view.equal{
? flex-basis:40%;
? background-color: rgb(41, 192, 252);
? color:#fff;
}
.bg{
? background-color: #eee;
}
.result{
? position: relative;
}
.result-express{
? position: absolute;
? bottom:5vh;
? right: 3vw;
? font-size: 27pt;
}
.result-value{
? position: absolute;
? bottom: 1vh;
? right: 3vw;
? font-size: 16pt;
? color: darkgray;
}index.js
// index.js
const app = getApp();
const {REGEXP} = app;
Page({
? data:{
? ? express:"",
? ? result:"",
? ? isEqualBtnClicked:false
? },
? reset:function(e){
? ? this.setData({
? ? ? express:"",
? ? ? result:"",
? ? ? isEqualBtnClicked:false
? ? })
? },
? preProcess:function(express){
? ? if(REGEXP.test(express[express.length-1])){
? ? ? express = express.slice(0,express.length-1);
? ? }
? ? return express;
? },
? delete:function(){
? ? const {express} = this.data;
? ? let newExpress = express.slice(0,express.length-1);
? ? let expressForCalc = this.preProcess(newExpress);
? ? let temp = this.calculate(expressForCalc);
? ? let newResult = temp==="0"?"":temp;
? ? this.setData({
? ? ? express:newExpress,
? ? ? result:newResult
? ? })
? },
? equal:function(){
? ? const {express} = this.data;
? ? let expressForCalc = this.preProcess(express);
? ? this.setData({
? ? ? result:"",
? ? ? express:this.calculate(expressForCalc),
? ? ? isEqualBtnClicked:true
? ? })
? },
? clickNumBtn:function(e){
? ? const val = e.target.dataset.val;
? ? let {express} = this.data;
? ? express+=val;
? ? this.setData({
? ? ? express:express,
? ? ? result:this.calculate(express)
? ? },function(){
? ? ? console.log(`click numBtn,current express: ${this.data.express},it'time to get result:${this.calculate(express)}`);
??
? ? })
? },
? clickOptBtn:function(e){
? ? let {express} = this.data;
? ? if(express==="" || REGEXP.test(express[express.length-1])) return;
? ? const opt = e.target.dataset.val;
? ? express+=opt;
? ? this.setData({
? ? ? express:express
? ? },function(){
? ? ? console.log("click optBtn,current express:",this.data.express);
? ? })
? },
? getLeftAndRight:function(express,i){
? ? const REGEXP = /\d+(\.\d+)?/;
? ? const REGEXP2 = /[\+\-×÷]/;
? ? let front = express.slice(0,i);
? ? let back = express.slice(i+1);
??
? ? let temp = front.split(REGEXP2);
? ? let left = Number(temp[temp.length-1]);
??
? ? let right = Number(back.match(REGEXP)[0]);
??
? ? return {left,right};
? },
? calculate:function(express){
? ? const REGEXP1 = /[×÷]/;
? ? const REGEXP2 = /\+(\d+)(\.\d+)?/;//正數(shù)
? ? const REGEXP3 = /\-(\d+)(\.\d+)?/;//負(fù)數(shù)
? ? const REGEXP4 = /\d+(\.\d+)?/; ?
? ? const {getLeftAndRight} = this;
??
? ? let temp;
? ? let result = 0;
??
? ? //先乘除
? ? while((temp = express.match(REGEXP1)) !== null){
? ? ? let opt = temp[0];
? ? ? let i = temp["index"];
? ? ? let {left,right} = getLeftAndRight(express,i);
? ? ? switch(opt){
? ? ? ? case "×":express = express.replace(left+opt+right,left*right);break;
? ? ? ? case "÷":express = express.replace(left+opt+right,left/right);break;
? ? ? }
? ? }
??
? ? //后加減
? ? let firstNum = 0,sum1=0,sum2=0;
??
? ? let res = express.match(REGEXP4);
? ? if(res!==null && res["index"]===0){
? ? ? let str = res[0];
? ? ? firstNum = Number(str);
? ? ? express = express.slice(str.length);
? ? }
??
? ? while((temp = express.match(REGEXP2)) != null){
? ? ? let str = temp[0];
? ? ? express = express.replace(str,"");
? ? ? sum1 += Number(str.slice(1));
? ? }
? ? while((temp = express.match(REGEXP3)) != null){
? ? ? let str = temp[0];
? ? ? express = express.replace(str,"");
? ? ? sum2 += Number(str.slice(1));
? ? }
? ??
? ? result += firstNum + sum1 - sum2;
? ??
? ? return result.toString();
? }
})測(cè)試驗(yàn)證
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
layui lay-verify form表單自定義驗(yàn)證規(guī)則詳解
今天小編就為大家分享一篇layui lay-verify form表單自定義驗(yàn)證規(guī)則詳解，具有很好的參考價(jià)值，相信我對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
Layui 導(dǎo)航默認(rèn)展開和菜單欄選中高亮設(shè)置的方法
今天小編就為大家分享一篇Layui 導(dǎo)航默認(rèn)展開和菜單欄選中高亮設(shè)置的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JS中Map、WeakMap和Object的區(qū)別解析
Map、WeakMap和Object都是JavaScript中用于存儲(chǔ)鍵值對(duì)的數(shù)據(jù)結(jié)構(gòu)，它們?cè)阪I類型、垃圾回收、可枚舉性、方法和操作、以及繼承等方面存在一些區(qū)別，適用于不同的場(chǎng)景，本文給大家詳細(xì)講解js map、weakmap和object區(qū)別，需要的朋友可以參考下2023-04-04
我們可以在script片斷中定義一個(gè)被JS調(diào)用的代碼，但代碼又不在頁(yè)面上顯示，這時(shí)，我們可以使用下面的方法;當(dāng)script中的type等于text/html時(shí)我們可以做些什么呢？感興趣的朋友可以了解下啊2013-01-01
這篇文章主要為大家詳細(xì)介紹了Bootstrap創(chuàng)建可折疊組件的對(duì)應(yīng)方法，以實(shí)例為大家分享了Bootstrap折疊組件，感興趣的小伙伴們可以參考一下2016-02-02
實(shí)例詳解JavaScript獲取鏈接參數(shù)的方法
這篇文章主要介紹了實(shí)例詳解JavaScript獲取鏈接參數(shù)的方法的相關(guān)資料,需要的朋友可以參考下2016-01-01
瀏覽器視頻幀操作方法?requestVideoFrameCallback()
這篇文章主要介紹了瀏覽器視頻幀操作方法?requestVideoFrameCallback()，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
Driver.js前端引導(dǎo)頁(yè)組件的具體使用
Driver.js是一個(gè)引導(dǎo)插件，本文主要介紹了Driver.js前端引導(dǎo)頁(yè)組件的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要為大家詳細(xì)介紹了十大熱門的JavaScript框架和庫(kù)，前端必備，感興趣的小伙伴們可以參考一下2017-03-03
馬上圣誕節(jié)了，作為一名程序猿，如何體現(xiàn)自己獨(dú)特的過(guò)節(jié)風(fēng)格，如何在朋友圈發(fā)一張專屬自己的祝福照片我覺得很有必要，你們說(shuō)是不是2015-12-12