您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍微信小程序如何实现简单的计算器功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
具体内容如下
wxml
<view class='content'> <input value='{{calculation}}'></input> <view class='box'> <button class='yellow-color'>退格</button> <button class='yellow-color' bindtap='empty'>清屏</button> <button class='yellow-color'>❤</button> <button bindtap='add' data-text='+' class='yellow-color'>+</button> </view> <view class='box'> <button bindtap='add' data-text='9'>9</button> <button bindtap='add' data-text='8'>8</button> <button bindtap='add' data-text='7'>7</button> <button bindtap='add' class='yellow-color' data-text='-'>-</button> </view> <view class='box'> <button bindtap='add' data-text='6'>6</button> <button bindtap='add' data-text='5'>5</button> <button bindtap='add' data-text='4'>4</button> <button bindtap='add' class='yellow-color' data-text='*'>*</button> </view> <view class='box'> <button bindtap='add' data-text='3'>3</button> <button bindtap='add' data-text='2'>2</button> <button bindtap='add' data-text='1'>1</button> <button bindtap='add' data-text='/' class='yellow-color'>÷</button> </view> <view class='box'> <button bindtap='add' data-text='0'>0</button> <button bindtap='add' data-text='.'>.</button> <button>历史</button> <button class='yellow-color' bindtap='res'>=</button> </view> </view>
wxss
input { width: 95%; height: 250rpx; margin: 0 auto; margin-bottom: 20rpx; border-bottom: 1rpx solid #ccc; } .box { display: flex; } button { width: 20%; height: 150rpx; margin-bottom: 20rpx; line-height: 150rpx; background-color:rgb(0, 150, 250); color: white; } .yellow-color { background-color: rgb(247, 142, 24) }
JS
//index.js //获取应用实例 const app = getApp() Page({ data: { calculation:"", result:0, character:[], // 运算符号 operand: [], // 数字 temp:false }, // 输入框输入数据 add:function(e) { let input = e.currentTarget.dataset.text; var that = this; if (input == '+' || input == '-' || input == '*' || input == '/') { this.data.temp = false; // 用于记录上一次是否是操作符 var item = 'character[' + this.data.character.length+ ']'; this.setData({ [item] :input }) } else { var item = 'operand['+this.data.operand.length+']'; if(that.data.temp) { // 拿到前一个的值 var res = 'operand[' + (this.data.operand.length-1) + ']' var ress= that.data.operand.length-1; var xyz = that.data.operand[ress] * 10 + parseInt(input); that.setData({ [res]:xyz }) } else { input = parseInt(input); that.data.temp = true; that.setData({ [item]: input }) } } // 将所有的内容放到显示框中 this.setData({ calculation:this.data.calculation+input }) }, // 计算答案 res:function() { console.log(this.data.character.length); console.log(this.data.operand.length) var character_len = this.data.character.length ; var operand_len = this.data.operand.length; console.log(operand_len - character_len) if(operand_len - character_len == 1) { this.data.result = this.data.operand[0]; console.log("初始值"+this.data.result); for(var i=0;i<character_len;i++) { if(this.data.character[i] == '+') { this.data.result = this.data.result + this.data.operand[i + 1]; } if (this.data.character[i] == '-') { this.data.result = this.data.result - this.data.operand[i + 1]; } if (this.data.character[i] == '*') { this.data.result = this.data.result * this.data.operand[i + 1]; } if (this.data.character[i] == '/') { this.data.result = this.data.result / this.data.operand[i + 1]; } } } else { this.setData({ result:'输入有误,清空数据,重新输入' }) } this.setData({ calculation:this.data.result }) }, // 清空屏幕 empty:function() { this.setData({ calculation: "", result: 0, character: [], // 运算符号 operand: [], // 数字 temp: false } } })
以上是“微信小程序如何实现简单的计算器功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。