微信小程序 簡易計(jì)算器實(shí)現(xiàn)代碼實(shí)例

<view class="screen">{{result}}</view>
<view class="content"> 
 <view class="buttonGroup">
 <button id="{{id1}}" bindtap="clickButton" class="buttonitem color1" hover-class="shadow">清除</button>
 <button id="{{id2}}" bindtap="clickButton" class="buttonitem color1" hover-class="shadow">回退</button>
 <button id="{{id3}}" bindtap="time" class="buttonitem color1" hover-class="shadow">
 <icon type="waiting" color="#66CC33"></icon>
 </button>
 <button id="{{id4}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">÷</button>
 </view>

 <view class="buttonGroup"> 
 <button id="{{id17}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow7">7</button>
 <button id="{{id18}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow8">8</button>
 <button id="{{id19}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow9">9</button>
 <button id="{{id5}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">×</button>
 </view>

 <view class="buttonGroup">
 <button id="{{id14}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow4">4</button>
 <button id="{{id15}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow5">5</button>
 <button id="{{id16}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow6">6</button>
 <button id="{{id6}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">-</button>
 </view>

 <view class="buttonGroup">
 <button id="{{id11}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow1">1</button>
 <button id="{{id12}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow2">2</button>
 <button id="{{id13}}" bindtap="clickButton" class="buttonitem color3" hover-class="shadow3">3</button>
 <button id="{{id7}}" bindtap="clickButton" class="buttonitem color2" hover-class="shadow1">+</button>
 </view>

 <view class="buttonGroup">
 <button id="{{id10}}" bindtap="clickButton" class="buttonitem1 color3" hover-class="shadow0">0</button>
 <button id="{{id8}}" bindtap="clickButton" class="buttonitem1 color2" hover-class="shadow1">.</button>
 <button id="{{id9}}" bindtap="equal" class="buttonitem1 color2" hover-class="shadow1">=</button>
 </view>
</view>

/* pages/cal/cal.wxss */
page{
 background: #000000;
}
.screen{
 position: fixed;
 color: #ffffff;
 font-size: 30px;
 bottom: 780rpx;
 text-align: right;
 width: 730rpx;
 word-wrap: break-word;
}
.content{
 position: fixed;
 bottom: 0;
}
.buttonGroup{
 display: flex;
 flex-direction: row;
}
.buttonitem{
 text-align: center;
 line-height: 148rpx;
 width: 192rpx;
 border-radius: 0;
}
.buttonitem1{
 width: 255rpx;
 text-align: center;
 line-height: 148rpx;
 border-radius: 0;
}
icon{
 position: absolute;
 top: 30rpx;
 left: 67rpx;
}
.color1{
 background: #CCFF99;
}
.color2{
 background: #FFFF99;
}
.color3{
 background: rgb(167, 223, 241);
}
.shadow{
 background: #88e676;
}
.shadow0{
 background: rgb(149, 118, 243);
}
.shadow1{
 background: #FFCC66;
}
.shadow2{
 background: #99FF00;
}
.shadow3{
 background: #FF9999;
}
.shadow4{
 background: #00CC66;
}
.shadow5{
 background: #00CCFF;
}
.shadow6{
 background: rgb(248, 80, 80);
}
.shadow7{
 background: #FFCCFF;
}
.shadow8{
 background: #CCCCCC;
}
.shadow9{
 background: #CCFFFF;
}

// pages/cal/cal.js
Page({
 data: {
 result:"0",
 id1:"clear",
 id2:"back",
 id3:"time",
 id4:"div",
 id5:"mul",
 id6:"sub",
 id7:"add",
 id8:"dot",
 id9:"eql",
 id10:"num_0",
 id11:"num_1",
 id12:"num_2",
 id13:"num_3",
 id14:"num_4",
 id15:"num_5",
 id16:"num_6",
 id17:"num_7",
 id18:"num_8",
 id19:"num_9",
 buttonDot:false,
 },
 clickButton: function (e) {
 console.log(e);
 var buttonVal = e.target.id;
 var res = this.data.result;
 var newbuttonDot=this.data.buttonDot;
 var sign;
 if (buttonVal >= "num_0" && buttonVal <= "num_9") {
 var num=buttonVal.split('_')[1];
 if (res == "0" || res.charAt(res.length -(length-1)) == "=") {
 res = num;
 }
 else {
 res = res + num;
 }
 }
 else{
 if(buttonVal=="dot")
 {
 if(!newbuttonDot)
 {
 res = res + '.';
 }
 }
 else if(buttonVal=="clear")
 {
 res='0';
 }
 else if(buttonVal=="back")
 {
 var length=res.length;
 if(length>1)
 {
 res=res.substr(0,length-1);
 }
 else{
 res='0';
 }
 }
 else if (buttonVal == "div" || buttonVal == "mul" || buttonVal == "sub" || buttonVal == "add")
 {
 switch(buttonVal){
 case "div":
 sign ='÷';
 break;
 case "mul":
 sign ='×';
 break;
 case "sub":
 sign='-';
 break;
 case "add":
 sign='+';
 break;
 }
 if(!isNaN(res.charAt(res.length-1)))
 {
 res=res+sign;
 }
 }
 }
 this.setData({
 result: res,
 buttonDot:newbuttonDot,
 });
 },
 equal: function(e){
 var str=this.data.result;
 var item= '';
 var strArray = [];
 var temp=0;
 for(var i=0;i<=str.length;i++){
 var s=str.charAt(i);
 if((s!='' && s>='0' && s<='9') || s=='.'){
 item=item+s;
 }
 else{
 strArray[temp]=item;
 temp++;
 strArray[temp]=s;
 temp++;
 item='';
 }
 }
 if(isNaN(strArray[strArray.length-1]))
 {
 strArray.pop();
 }
 var num;
 var res=strArray[0]*1;
 for(var i=1;i<=strArray.length;i=i+2){
 num=strArray[i+1];
 switch(strArray[i]){
 case "-":
 res = res - num;
 break;
 case "+":
 res = res + num;
 break;
 case "×":
 res = res * num;
 break;
 case "÷":
 if(num!='0')
 {
 res = res / num;
 }
 else
 {
 res ='∞';
 break;
 } 
 break;
 }
 }
 this.setData({
 result:'='+res,
 });
 },
 time:function(e){
 var util=require("../../utils/util.js");
 var time=util.formatTime(new Date());
 this.setData({
 result:time
 });
 }

})

{
 "navigationBarBackgroundColor": "#FF9900",
 "navigationBarTitleText": "EN計(jì)算器",
 "usingComponents": {}
}