第微信小程序?qū)崿F(xiàn)計算器案例本文實例為大家分享了微信小程序?qū)崿F(xiàn)計算器的具體代碼，供大家參考，具體內(nèi)容如下

分為上面輸入的顯示部分和下面按鍵部分

!s/index/index.wxml--

view

view{{num}}/view

view{{op}}/view

/view

view

view

viewhover-bindtap="resetBtn"C/view

viewhover-bindtap="delBtn"DEL/view

viewhover-bindtap="opBtn"data-val="%"%/view

viewhover-bindtap="opBtn"data-val="/"÷/view

/view

view

viewhover-bindtap="numBtn"data-val="7"7/view

viewhover-bindtap="numBtn"data-val="8"8/view

viewhover-bindtap="numBtn"data-val="9"9/view

viewhover-bindtap="opBtn"data-val="*"×/view

/view

view

viewhover-bindtap="numBtn"data-val="4"4/view

viewhover-bindtap="numBtn"data-val="5"5/view

viewhover-bindtap="numBtn"data-val="6"6/view

viewhover-bindtap="opBtn"data-val="-"-/view

/view

view

viewhover-bindtap="numBtn"data-val="1"1/view

viewhover-bindtap="numBtn"data-val="2"2/view

viewhover-bindtap="numBtn"data-val="3"3/view

viewhover-bindtap="opBtn"data-val="+"+/view

/view

view

viewhover-bindtap="numBtn"data-val="0"0/view

viewhover-bindtap="dotBtn"./view

viewhover-bindtap="opBtn"data-val="="=/view

/view

/view

/*pages/index/index.wxss*/

page{

display:flex;

flex-direction:column;

height:100%;

color:#555;

.result{

flex:1;

background:#f3f6fe;

position:relative;

.result-num{

position:absolute;

font-size:27pt;

bottom:5vh;

right:3vw;

.result-op{

font-size:15pt;

position:absolute;

bottom:1vh;

right:3vw;

.btns{

flex:1;

/*按鈕樣式*/

.bg{

background:rgb(223,44,20);

.btns{

flex:1;

display:flex;

flex-direction:column;

font-size:17pt;

border-top:1rpxsolid#ccc;

border-left:1rpxsolid#ccc;

.btnsview{

flex:1;

display:flex;

.btnsviewview{

flex-basis:25%;

border-right:1rpxsolid#ccc;

border-bottom:1rpxsolid#ccc;

box-sizing:border-box;

display:flex;

align-items:center;

justify-content:center;

.btnsview:last-childview:first-child{

flex-basis:50%;

.btnsview:first-childview:first-child{

color:#f00;

.btnsviewview:last-child{

color:#fc8e00;

}

util–calc.js

計算過程是將小數(shù)都乘以兩數(shù)10的最大次冪化為整數(shù)，這樣可進行高精度計算，最后再將得數(shù)除以相應的10的次冪

例如

//精確計算

module.exports={

//加

add:function(arg1,arg2){

varr1,r2,m

try{

r1=arg1.toString().split(".")[1].length

}catch(e){

r1=0

try{

r2=arg2.toString().split(".")[1].length

}catch(e){

r2=0

//將小數(shù)都化為整數(shù)在進行計算m是需要×的10的冪數(shù)

m=Math.pow(10,Math.max(r1,r2))

//最后返回的時候再除以m

return(arg1*m+arg2*m)/m

//減

sub:function(arg1,arg2){

varr1,r2,m,n

try{

r1=arg1.toString().split(".")[1].length

}catch(e){

r1=0

try{

r2=arg2.toString().split(".")[1].length

}catch(e){

r2=0

m=Math.pow(10,Math.max(r1,r2))

//動態(tài)控制精度長度

n=(r1=r2)r1:r2

return((arg1*m-arg2*m)/m).toFixed(n)

//乘

mul:function(arg1,arg2){

varm=0,

s1=arg1.toString(),

s2=arg2.toString()

try{

m+=s1.split(".")[1].length

}catch(e){}

try{

m+=s2.split(".")[1].length

}catch(e){}

returnNumber(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)

//除

div:function(arg1,arg2){

vart1=0,

t2=0,

r1,r2

try{

t1=arg1.toString().split(".")[1].length

}catch(e){}

try{

t2=arg2.toString().split(".")[1].length

}catch(e){}

r1=Number(arg1.toString().replace(".",""))

r2=Number(arg2.toString().replace(".",""))

return(r1/r2)*Math.pow(10,t2-t1)

}

index.js

數(shù)字點擊處理事件

當點擊數(shù)字不為零，并且指示不清空時候，將輸入的num拼接到page里的num

//數(shù)字按鈕事件處理函數(shù)

numBtn:function(e){

varnum=e.target.dataset.val

if(this.data.num==='0'||this.isClear){

this.setData({

num:num

this.isClear=false

}else{

this.setData({

num:this.data.num+num

},

運算符處理事件

//運算符事件處理函數(shù)

opBtn:function(e){

varop=this.data.op

//獲取之前的數(shù)

varnum=Number(this.data.num)

this.setData({

op:e.target.dataset.val

if(this.isClear){

return

this.isClear=true

if(this.result===null){

this.result=num

return

if(op==='+'){

this.result=calc.add(this.result,num)

}elseif(op==='-'){

其他運算操作（詳細代碼看下面完整代碼部分）

this.setData({

num:this.result+''

},

全部js

//pages/index/index.js

constcalc=require('../../utils/calc.js')

Page({

*頁面的初始數(shù)據(jù)

data:{

num:'0',

op:''

//結(jié)果

result:null,

//是否清空數(shù)字行

清空的情況(值為true)

點擊過運算符之后,改為true以便下一次輸入數(shù)字顯示

點擊清空

isClear:false,

//數(shù)字按鈕事件處理函數(shù)

numBtn:function(e){

varnum=e.target.dataset.val

if(this.data.num==='0'||this.isClear){

this.setData({

num:num

this.isClear=false

}else{

this.setData({

num:this.data.num+num

//運算符事件處理函數(shù)

opBtn:function(e){

varop=this.data.op

//獲取之前的數(shù)

varnum=Number(this.data.num)

this.setData({

op:e.target.dataset.val

if(this.isClear){

return

this.isClear=true

if(this.result===null){

this.result=num

return

if(op==='+'){

this.result=calc.add(this.result,num)

}elseif(op==='-'){

this.result=calc.sub(this.result,num)

}elseif(op==='*'){

this.result=calc.mul(this.result,num)

}elseif(op==='/'){

this.result=calc.div(this.result,num)

}elseif(op==='%'){

this.result=this.r