微信小程序 简易计算器实现代码实例

这篇文章主要介绍了微信小程序 简易计算器实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

只能进行简单的运算

效果图如下：

cal.wxml

<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>

cal.wxss

/* 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;
}

cal.js

// 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
 });
}

})

cal.json

{
"navigationBarBackgroundColor": "#FF9900",
"navigationBarTitleText": "EN计算器",
"usingComponents": {}
}

其中有一些小错误，望大神指正！！！！

来源：https://www.cnblogs.com/en1302coling/p/11439305.html