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

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

只能进行简单的运算

效果图如下：

cal.wxml

view class=' screen ' { result } }/view view class=' content ' view class=' button group ' button id=' { { id1 } } ' bind tap=' click button ' class=' button item color 1 ' hover-class=' shadow '清除/button button id=' { { id2 } } bind tap=“单击按钮”class=“按钮项目颜色1”hover-class=“阴影”回退/button button id=' { { ID3 } } ' bind tap=' time ' class=' button item color 1 ' hover-class=' shadow ' icon type=' waiting ' color=' # 66cc 33 '/icon/button button id=' { { ID4 } } bind tap=' click button ' class=' button item color 2 ' hover-class=' shadow 1 '/button/view class=' button group ' button id=' { { id17 } } ' bind tap=' click button ' class=' button item color ' button id=' { { id6 } } bind tap=' click button ' class=' button item color 2 ' hover-class=' shadow 1 '-/button/view view class=' button group ' button id=' { { id11 } } ' bind tap=' click button ' class=' button item color 3 ' hover-class=' shadow 1 ' 1/button button id=' { { id12 } } bind tap=' click button ' class=' button item color 3 ' hover-class=' shadow 2 ' 2/button id=' '/button button id=' { { id9 } } ' bind tap=' equal ' class=' button item 1 color 2 ' hover-class=' shadow 1 '=/button/view/view cal。 页面样式表

/*页数/cal/cal。wxss */page { background : # 000000；}.屏幕{位置：固定；color : # fffffont-size : 30px；bottom : 780 rpxtext-align :右侧；宽度： 730 rpx单词包装：断字；}.内容{位置：固定；底部： 0；}.button GrouP { display : flex flex-direction : row；}.按钮项{ text-align :居中；线高： 148 rpx宽度： 192 rpx边界半径： 0;} .按钮项目1 {宽度： 255 rpx文本对齐：中心；线高： 148 rpx边界半径： 0;}图标{ position : absolutetop : 30 rpxleft : 67 rpx }。颜色1 {背景： # CCFF99} .颜色2 {背景： # FFFF99} .颜色3 {背景： RGB(167，223，241)；}.阴影{ background: # 88e676}。阴影0 {背景： RGB(149，118，243)；} .阴影1 {背景： # ffcc 66} .阴影2 {背景： # 99ff 00} .阴影3 {背景： # FF9999} .阴影4 {背景： # 00cc 66} .阴影5 {背景： # 00CCFF} .阴影6 {背景： RGB(248，80，80)；} .暗影7 {背景： # FFCCFF} .暗影8 {背景： # CCCCCC；} .暗影9 {背景： # CCFFFF}cal.js

//page/cal/cal。js页面({ data : { result : ' 0 '，id1:'clear '，id2:'back '，id3:'time '，id4: ' div '，id5: ' mul '，id6: ' sub '，id7: ' add '，id8:'dot '，id9:'eql '，id 10333366 var ButtonVal=1id；var RES=这个。数据。结果；var新按钮点=这个。数据。按钮点；定义变量符号；if(button val=' num _ 0 ' button val=' num _ 9 '){ var num=button val。split(' _ ')[1]；if(RES==' 0 ' | | RES . charat(RES . length-(length-1))=='='){ RES=num；} else { RES=RES num } } else { if(ButtonVal==' dot '){ if(！new button DoT){ RES=RES . '；} } else if(ButtonVal==' clear '){ RES=' 0 '；} else if(ButtonVal==' back '){ var length=RES . length；if(length1) { res=res.substr(0，length-1)；} else { RES=' 0 } } else if(button val=' div ' | | button val=' mul ' | | button val=' sub ' | | button val=' add '){ switch(button val){ case ' div ' : sign='；打破；大小写“mul”:符号="";打破；大小写sub':符号='-';打破；大小写“添加”:符号="";打破；} if(！isNaN(RES . charat(RES . length-1)){ RES=RES符号；} } }这个。setdata({ result : RES，buttonDot:newbuttonDot，})；},等于：函数(e){ var str=this。数据。结果；var item=var Strarray=[]；var temp=0；for(var I=0；I=str . LengTii){ var s=str。charat(一)；if(((s！=' s=' 0 ' s=' 9 ')| | s=='，'){ item=item s；} else { Strarray[temp]=item；温度；strArray[temp]=s；温度；项目=' ';} } if(ISnan(Strarray[Strarray。length-1]){ Strarray。pop()；} var numvar RES=Strarray[0]* 1；for(var I=1；I=strarray . lengthi=I ^ 2){ num=strarray[I ^ 1]；switch(Strarray[I]){ case '-' : RES=RES-num；打破；案例' : res=res num打破；大小写'' : RES=RES * num；打破；如果(num！=' 0 '){ RES=RES/num；} else { RES=''；打破；}打破} }这个。setdata({ result : '=' RES，})；}，time :函数(e){ var util=require('././utils/util。js’)；var time=util。格式化时间(新的Date())；这个。setdata({ result : time })；}})cal.json

{ ' navigationBarBackgroundColor ' : ' # ff 9900 '，' navigationBarTitleText ' : ' EN计算器",使用组件": {}"其中有一些小错误，望大神指正！

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