微信小程序计时器
微信小程序实现简单的计算器功能本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下
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 } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。