本文小編為大家詳細介紹“怎么用微信小程序實現計算器功能”，內容詳細，步驟清晰，細節處理妥當，希望這篇“怎么用微信小程序實現計算器功能”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

頁面部分

<viewclass="box">
<viewclass="txt">{{screenNum}}</view>
<viewcapture-bind:touchstart="compute">
<view>
<buttondata-val="clear"class="boxtnbtn1">AC</button>
<buttondata-val="back"class="boxtnbtn1">←</button>
<buttondata-val="#"class="boxtnbtn1">#</button>
<buttondata-val="/"class="boxtnbtn">/</button>
</view>
<view>
<buttondata-val="7"class="boxtn">7</button>
<buttondata-val="8"class="boxtn">8</button>
<buttondata-val="9"class="boxtn">9</button>
<buttondata-val="*"class="boxtnbtn">*</button>
</view>
<view>
<buttondata-val="4"class="boxtn">4</button>
<buttondata-val="5"class="boxtn">5</button>
<buttondata-val="6"class="boxtn">6</button>
<buttondata-val="-"class="boxtnbtn">-</button>
</view>
<view>
<buttondata-val="1"class="boxtn">1</button>
<buttondata-val="2"class="boxtn">2</button>
<buttondata-val="3"class="boxtn">3</button>
<buttondata-val="+"class="boxtnbtn">+</button>
</view>
<view>
<buttondata-val="1"class="boxtnbtn2">0</button>
<buttondata-val="."class="boxtn">.</button>
<buttondata-val="="class="boxtnbtn">=</button>
</view>
</view>
</view>

樣式部分

.box{
width:100%;
height:700px;
background:#000;
}
.txt{
color:#fff;
width:100%;
height:120px;
font-size:50px;
text-align:right;
}
.boxtn{
width:90px;
height:90px;
display:block;
float:left;
border-radius:50%;
line-height:90px;
text-align:center;
margin-left:3px;
margin-top:5px;
color:#fff;
background:#333333;
font-weight:bold;
font-size:25px;
}
.btn{
background:#f09a37;
}
.btn1{
background:#a5a5a5;
color:#000;
}
.btn2{
width:180px;
border-radius:40px;
}

js部分

//index.js
//獲取應用實例
constapp=getApp()

Page({

/**
*頁面的初始數據
*/
data:{
screenNum:0,//屏幕顯示的數
currentNum:"",//當前輸入的數
storage:0,//存儲的數
operator:"",//運算符
off:false,
},

compute:function(e){
varbtn_num=e.target.dataset.val;
varobj=this;
if(!isNaN(btn_num)){
if(obj.data.off==true){
obj.data.currentNum=""
obj.data.off=false;
}
obj.data.currentNum+=btn_num
obj.data.currentNum=Number(obj.data.currentNum);
obj.data.currentNum=obj.data.currentNum.toString();
}else{
switch(btn_num){
case"+":
case"-":
case"*":
case"/":
case"=":
//將當前屏幕上的數字和本次的操作符存儲到變量

if(obj.data.storage==0){
obj.data.storage=obj.data.currentNum;
obj.data.operator=btn_num;
}else{
if(obj.data.off!=true){
if(obj.data.operator=="+"){
obj.data.currentNum=Number(obj.data.storage)+Number(obj.data.currentNum)
}elseif(obj.data.operator=="-"){
obj.data.currentNum=Number(obj.data.storage)-Number(obj.data.currentNum)
}elseif(obj.data.operator=="*"){
obj.data.currentNum=Number(obj.data.storage)*Number(obj.data.currentNum)
}elseif(obj.data.operator=="/"){
obj.data.currentNum=Number(obj.data.storage)/Number(obj.data.currentNum)
}
}
obj.data.storage=obj.data.currentNum;
obj.data.operator=btn_num;
}

obj.data.off=true;
break;
case"clear":
obj.data.storage=0;
obj.data.currentNum="0";
obj.data.operator="";
break;
case"back":
obj.data.currentNum=obj.data.currentNum.slice(0,-1);
if(obj.data.currentNum==""){
obj.data.currentNum="0";
}
break;
case".":
if(obj.data.currentNum.indexOf(".")==-1){//判斷是否已包含“.”
obj.data.currentNum+=btn_num
}
break;
}
}
obj.setData({
screenNum:obj.data.currentNum
})
},

})

效果圖如下

微信開發者工具下載地址

總結

以上是生活随笔為你收集整理的怎么用微信小程序实现计算器功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。