当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序 简易计算器实现代码实例

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

2019年09月06日  | 移动技术网IT编程  | 我要评论

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

只能进行简单的运算

效果图如下：

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

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网