这篇文章主要介绍了微信小程序 简易计算器实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
只能进行简单的运算
效果图如下:
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": {} }
其中有一些小错误,望大神指正!!!!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年11月26日
2024年11月26日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]