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

更新时间：2019年09月02日 14:31:03 作者：EN_T

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

只能进行简单的运算

效果图如下：

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

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

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

您可能感兴趣的文章:

js实现华丽的九九乘法表效果
本文主要介绍了js实现华丽的九九乘法表效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
2017-03-03
JS多个异步请求按顺序执行next实现解析
这篇文章主要介绍了js多个异步请求按顺序执行next实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
JavaScript中“+=”的应用
JavaScript中“+=”的应用...
2007-02-02
60行js代码实现俄罗斯方块
这篇文章主要介绍了60行js代码实现俄罗斯方块，可能会有些小bug，不过总体上还是比较不错的。大伙来研究下代码，给出意见。
2015-03-03
javascript简单实现表格行间隔显示颜色并高亮显示
表格行间隔显示颜色并实现高亮显示，这种效果大家都有见到过吧，下面就为大家详细介绍下,需要的朋友可不要错过
2013-11-11
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
这篇文章主要介绍了详述 Sublime Text 打开 GBK 格式中文乱码的解决方法，非常具有实用价值，需要的朋友可以参考下
2017-10-10
Webpack中使用环境变量的各种正确姿势
我们在开发项目中都会遇到这种场景,区分开发环境、生产环境、测试环境,不同场景请求不同的接口Api,这时候项目中配置的「环境变量」就登场啦,这篇文章主要给大家介绍了关于Webpack中使用环境变量的各种正确姿势,需要的朋友可以参考下
2021-09-09
js修改table中Td的值(定义td的双击事件)
这次是更改后的代码实现以下功能：去掉了“确定”，“取消”按钮。变单击为双击事件，用户按ESC键，取消更改感兴趣的朋友可以了解下
2013-01-01
一文带你了解JavaScript函数柯里化
柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。本文将通过一些示例带大家深入了解JS的函数柯里化，需要的可以参考一下
2023-02-02
JavaScript中你不知道的Object.entries用法
大家应该都知道,Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致,这篇文章主要给大家介绍了关于JavaScript中你不知道的Object.entries用法的相关资料,需要的朋友可以参考下
2021-10-10