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

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

创新互联公司是一家集网站建设,明溪企业网站建设,明溪品牌网站建设,网站定制,明溪网站建设报价,网络营销,网络优化,明溪网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

只能进行简单的运算

效果图如下：

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

cal.wxml

{{result}}

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

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

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

网页标题：微信小程序简易计算器实现代码实例
分享链接：http://azwzsj.com/article/gdeijg.html

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

其他资讯