| 微信小程序：简单计算器，供大家参考，具体内容如下 对于才接触小程序不久的人来说，想要直接上手一个实用性强的项目难度很大，想要快速熟悉小程序的使用，我们可以先尝试着做一个简单的计算器。 运行截图 
计算器对于界面美观的要求并不高，只是一些view以及button控件的组合，所以并不需要在界面上费很多功夫。重要的是逻辑层，之所以选择计算器作为上手的第一个项目，因为计算器的逻辑可简可繁，完全可以适应新手对小程序的掌握程度。 主要代码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, is_time:false }, clickButton: function (e) { console.log(e); var buttonVal = e.target.id; var res = this.data.result; if(this.data.is_time==true){ res=0 } var newbuttonDot=this.data.buttonDot; var sign; if (buttonVal >= "num_0" && buttonVal <= "num_9") { var num=buttonVal.split('_')[1]; if (res == "0" || ((res.length-0) -(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") { if(res.length){} else{ res=JSON.stringify(res) } var is_sign=res.substr(res.length-1,res.length) if(is_sign=="+"||is_sign=="-"||is_sign=="×"||is_sign=="÷"){ res=res.substr(0,res.length-1); } switch(buttonVal){ case "div": sign ='÷'; break; case "mul": sign ='×'; break; case "sub": sign='-'; break; case "add": sign='+'; break; } if(!isNaN(res.length)) { res.length-1; res=res+sign; } } } this.setData({ is_time:false, 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-0)- (num-0); break; case "+": res = (res-0) + (num-0); break; case "×": res = (res-0)* (num-0); break; case "÷": if(num!='0') { res = (res-0)/ (num-0); } 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, is_time:true }); }})wxml <!--index.wxml--><view class="project_name">简单计算器</view><view class="screen_content"> <view class="screen">{{result}}</view></view><view class="content"> <view class="buttonGroup"> <button id="{{id1}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">C</button> <button id="{{id2}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">BS</button> <button id="{{id3}}" bindtap="time" class="buttonitem color" hover-class="shadow"> <icon type="waiting" color="#66CC33"></icon> </button> <button id="{{id4}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">÷</button> </view> <view class="buttonGroup"> <button id="{{id17}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">7</button> <button id="{{id18}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">8</button> <button id="{{id19}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">9</button> <button id="{{id5}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">×</button> </view> <view class="buttonGroup"> <button id="{{id14}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">4</button> <button id="{{id15}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">5</button> <button id="{{id16}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">6</button> <button id="{{id6}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">-</button> </view> <view class="buttonGroup"> <button id="{{id11}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">1</button> <button id="{{id12}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">2</button> <button id="{{id13}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">3</button> <button id="{{id7}}" bindtap="clickButton" class="buttonitem color" hover-class="shadow">+</button> </view> <view class="buttonGroup"> <button id="{{id10}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">0</button> <button id="{{id8}}" bindtap="clickButton" class="buttonitem1 color" hover-class="shadow">.</button> <button id="{{id9}}" bindtap="equal" class="equal" hover-class="shadow">=</button> </view></view>wxss: /**index.wxss**/page{ background: #f5f5f5; } .project_name{ position:absolute; top:25px; width:100%; text-align: center; font-size: 30px; } .screen_content{ position: fixed; color: #1b1717; background: #fff; font-size: 40px; bottom: 390px; text-align: right; height:100px; width: 100%; word-wrap: break-word; border-top:1px solid #a8a8a8; border-bottom:1px solid #a8a8a8; } .screen{ position: absolute; font-size: 40px; text-align: right; bottom:0px; width: 96%; left:2%; word-wrap: break-word; } .content{ position: fixed; bottom: 0; } .buttonGroup{ display: flex; flex-direction: row; } .buttonitem{ text-align: center; line-height: 120rpx; width: 25%; border-radius: 0; } .buttonitem1{ width: 192rpx; text-align: center; line-height: 120rpx; border-radius: 0; } icon{ position: absolute; top: 20%; left: 67rpx; } .color{ background: #fff; } .equal{ width: 380rpx; text-align: center; line-height: 120rpx; border-radius: 0; background: #fff; } .shadow{ background: #e9ebe9; }后记我这里只是对加减程进行了粗略的处理，但是这样的一个计算器也已经具备了初步的功能，随着我们掌握程度的加深，我们还可以添加平方，开方等更复杂的功能，从而熟练掌握小程序的开发。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
微信小程序实现计算器小功能
用微信小程序实现计算器功能 |
