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

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

只能进行简单的运算

效果图如下：

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\": {}
}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。