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

更新时间：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全屏显示显示代码的三种方法，有需要的朋友可以参考一下
2013-11-11
Bootstrap入门书籍之（四）菜单、按钮及导航
这篇文章主要介绍了Bootstrap入门书籍之（四）菜单、按钮及导航的相关资料,需要的朋友可以参考下
2016-02-02
浅谈Javascript事件处理程序的几种方式
事件就是用户或浏览器自身执行的某种动作。比如说click,mouseover，都是事件的名字。而相应某个事件的函数就叫事件处理程序（或事件侦听器）。为事件指定处理程序的方式有好几种
2012-06-06
Javascript本地存储localStorage看这一篇就够了
这篇文章主要给大家介绍了关于Javascript本地存储localStorage的相关资料,localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,需要的朋友可以参考下
2024-07-07
javascript之Object.assign()的痛点分析
这篇文章主要介绍了javascript之Object.assign()的痛点分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
JavaScript控制图片360度旋转代码
JavaScript控制一张图片旋转，每次旋转90度，可旋转一周360度，以前没见到过，也不知道有没有用，奉献给大家，希望喜欢
2011-12-12
JS简单实现数组去重的方法示例
这篇文章主要介绍了JS简单实现数组去重的方法,涉及javascript数组的遍历、判断及赋值操作,代码非常简单易懂,具有一定参考借鉴价值,需要的朋友可以参考下
2017-03-03
Javascript基础之数组的使用
这篇文章主要介绍了Javascript基础之数组的使用的相关资料，介绍的非常详解，具有参考借鉴价值，感兴趣的朋友一起学习吧
2016-05-05
ES6 Class中实现私有属性的一些方法总结
这篇文章主要给大家介绍了关于ES6 Class中实现私有属性的一些方法，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-07-07
uniapp小程序上传图片功能的实现
本篇文章我们研究一下，在移动端开发过程中经常使用到的图片上传功能，在大多数小程序或者APP中都会遇到一些实名认证或者头像上传的功能，对uniapp小程序上传图片功能感兴趣的朋友跟随小编一起看看吧
2023-01-01