经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序实现简单计算器功能
来源：jb51　　时间：2021/7/19 11:49:43　　对本文有异议

微信小程序：简单计算器，供大家参考，具体内容如下

对于才接触小程序不久的人来说，想要直接上手一个实用性强的项目难度很大，想要快速熟悉小程序的使用，我们可以先尝试着做一个简单的计算器。

运行截图

计算器对于界面美观的要求并不高，只是一些view以及button控件的组合，所以并不需要在界面上费很多功夫。重要的是逻辑层，之所以选择计算器作为上手的第一个项目，因为计算器的逻辑可简可繁，完全可以适应新手对小程序的掌握程度。

主要代码

js:

  1. Page({
  2.   data: {
  3.    result:"0",
  4.    id1:"clear",
  5.    id2:"back",
  6.    id3:"time",
  7.    id4:"div",
  8.    id5:"mul",
  9.    id6:"sub",
  10.    id7:"add",
  11.    id8:"dot",
  12.    id9:"eql",
  13.    id10:"num_0",
  14.    id11:"num_1",
  15.    id12:"num_2",
  16.    id13:"num_3",
  17.    id14:"num_4",
  18.    id15:"num_5",
  19.    id16:"num_6",
  20.    id17:"num_7",
  21.    id18:"num_8",
  22.    id19:"num_9",
  23.    buttonDot:false,
  24.    is_time:false
  25.   },
  26.   clickButton: function (e) {
  27.    console.log(e);
  28.    var buttonVal = e.target.id;
  29.    var res = this.data.result;
  30.    if(this.data.is_time==true){
  31.     res=0
  32.   }
  33.    var newbuttonDot=this.data.buttonDot;
  34.    var sign;
  35.    if (buttonVal >= "num_0" && buttonVal <= "num_9") {
  36.     var num=buttonVal.split('_')[1];
  37.     if (res == "0" || ((res.length-0) -(length-1)) == "=") {
  38.      res = num;
  39.     }
  40.     else {
  41.      res = res + num;
  42.     }
  43.    }
  44.    else{
  45.     if(buttonVal=="dot")
  46.     {
  47.      if(!newbuttonDot)
  48.      {
  49.       res = res + '.';
  50.      }
  51.     }
  52.     else if(buttonVal=="clear")
  53.     {
  54.      res='0';
  55.     }
  56.     else if(buttonVal=="back")
  57.     {
  58.      var length=res.length;
  59.      if(length>1)
  60.      {
  61.       res=res.substr(0,length-1);
  62.      }
  63.      else{
  64.       res='0'; 
  65.      }
  66.     }
  67.     else if (buttonVal == "div" || buttonVal == "mul" || buttonVal == "sub" || buttonVal == "add")
  68.     {
  69.       if(res.length){}
  70.       else{
  71.         res=JSON.stringify(res)
  72.       }  
  73.       var is_sign=res.substr(res.length-1,res.length)
  74.       if(is_sign=="+"||is_sign=="-"||is_sign=="×"||is_sign=="÷"){
  75.         res=res.substr(0,res.length-1);
  76.       }
  77.      switch(buttonVal){
  78.       case "div":
  79.        sign ='÷';
  80.        break;
  81.       case "mul":
  82.        sign ='×';
  83.        break;
  84.       case "sub":
  85.        sign='-';
  86.        break;
  87.       case "add":
  88.        sign='+';
  89.        break;
  90.      }
  91.      if(!isNaN(res.length))
  92.      {
  93.       res.length-1;
  94.       res=res+sign;
  95.      }
  96.     }
  97.    }
  98.    this.setData({
  99.     is_time:false,
  100.     result: res,
  101.     buttonDot:newbuttonDot,
  102.    });
  103.   },
  104.   equal: function(e){
  105.    var str=this.data.result;
  106.    var item= '';
  107.    var strArray = [];
  108.    var temp=0;
  109.    for(var i=0;i<=str.length;i++){
  110.     var s=str.charAt(i);
  111.     if((s!='' && s>='0' && s<='9') || s=='.'){
  112.      item=item+s;
  113.     }
  114.     else{
  115.      strArray[temp]=item;
  116.      temp++;
  117.      strArray[temp]=s;
  118.      temp++;
  119.      item='';
  120.     }
  121.    }
  122.    if(isNaN(strArray[strArray.length-1]))
  123.    {
  124.     strArray.pop();
  125.    }
  126.    var num;
  127.    var res=strArray[0]*1;
  128.    for(var i=1;i<=strArray.length;i=i+2){
  129.     num=strArray[i+1];
  130.     switch(strArray[i]){
  131.      case "-":
  132.       res = (res-0)- (num-0);
  133.       break;
  134.      case "+":
  135.       res = (res-0) + (num-0);
  136.       break;
  137.      case "×":
  138.       res = (res-0)* (num-0);
  139.       break;
  140.      case "÷":
  141.      if(num!='0')
  142.      {
  143.       res = (res-0)/ (num-0);
  144.      }
  145.      else
  146.      {
  147.       res ='∞';
  148.       break;
  149.      } 
  150.       break;
  151.     }
  152.    }
  153.    this.setData({
  154.     result:res,
  155.    });
  156.   },
  157.   time:function(e){
  158.    var util=require("../../utils/util.js");
  159.    var time=util.formatTime(new Date());
  160.    this.setData({
  161.     result:time,
  162.     is_time:true
  163.    });
  164.   }})

wxml

  1. <!--index.wxml-->
  2. <view class="project_name">简单计算器</view>
  3. <view class="screen_content">
  4.   <view class="screen">{{result}}</view>
  5. </view>
  6. <view class="content"> 
  7.  <view class="buttonGroup">
  8.   <button id="{{id1}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">C</button>
  9.   <button id="{{id2}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">BS</button>
  10.   <button id="{{id3}}" bindtap="time" class="buttonitem color" hover-class="shadow">
  11.   <icon type="waiting" color="#66CC33"></icon>
  12.   </button>
  13.   <button id="{{id4}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">÷</button>
  14.  </view> 
  15.  <view class="buttonGroup"> 
  16.   <button id="{{id17}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">7</button>
  17.   <button id="{{id18}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">8</button>
  18.   <button id="{{id19}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">9</button>
  19.   <button id="{{id5}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">×</button>
  20.  </view>
  21.  <view class="buttonGroup">
  22.   <button id="{{id14}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">4</button>
  23.   <button id="{{id15}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">5</button>
  24.   <button id="{{id16}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">6</button>
  25.   <button id="{{id6}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">-</button>
  26.  </view>
  27.  <view class="buttonGroup">
  28.   <button id="{{id11}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">1</button>
  29.   <button id="{{id12}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">2</button>
  30.   <button id="{{id13}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">3</button>
  31.   <button id="{{id7}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">+</button>
  32.  </view>
  33.  <view class="buttonGroup">
  34.   <button id="{{id10}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">0</button>
  35.   <button id="{{id8}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">.</button>
  36.   <button id="{{id9}}" bindtap="equal" class="equal" hover-class="shadow">=</button>
  37.  </view>
  38. </view>

wxss:

  1. /**index.wxss**/
  2. page{
  3.   background: #f5f5f5;
  4.  }
  5.  .project_name{
  6.    position:absolute;
  7.    top:25px;
  8.    width:100%;
  9.    text-align: center;
  10.    font-size: 30px;
  11.  }
  12.  .screen_content{
  13.   position: fixed;
  14.   color: #1b1717;
  15.   background: #fff;
  16.   font-size: 40px;
  17.   bottom: 390px;
  18.   text-align: right;
  19.   height:100px;
  20.   width: 100%;
  21.   word-wrap: break-word;
  22.   border-top:1px solid #a8a8a8;
  23.   border-bottom:1px solid #a8a8a8;
  24.  }
  25.  .screen{
  26.   position: absolute;
  27.   font-size: 40px;
  28.   text-align: right;
  29.   bottom:0px;
  30.   width: 96%;
  31.   left:2%;
  32.   word-wrap: break-word;
  33.  }
  34.  .content{
  35.   position: fixed;
  36.   bottom: 0;
  37.  }
  38.  .buttonGroup{
  39.   display: flex;
  40.   flex-direction: row;
  41.  }
  42.  .buttonitem{
  43.   text-align: center;
  44.   line-height: 120rpx;
  45.   width: 25%;
  46.   border-radius: 0;
  47.  }
  48.  .buttonitem1{
  49.   width: 192rpx;
  50.   text-align: center;
  51.   line-height: 120rpx;
  52.   border-radius: 0;
  53.  }
  54.  icon{
  55.   position: absolute;
  56.   top: 20%;
  57.   left: 67rpx;
  58.  }
  59.  .color{
  60.   background: #fff;
  61.  }
  62.  .equal{
  63.    width: 380rpx;
  64.    text-align: center;
  65.    line-height: 120rpx;
  66.    border-radius: 0;
  67.    background: #fff;
  68.  }
  69.  .shadow{
  70.   background: #e9ebe9;
  71.  }

后记

我这里只是对加减程进行了粗略的处理，但是这样的一个计算器也已经具备了初步的功能，随着我们掌握程度的加深，我们还可以添加平方，开方等更复杂的功能，从而熟练掌握小程序的开发。

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号