微信小程序计时器(微信小程序实现简单的计算器功能)
类别:编程学习 浏览量:1395
时间:2021-10-12 00:30:11 微信小程序计时器
微信小程序实现简单的计算器功能本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下
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 } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- flask项目微信小程序(Python Flask 搭建微信小程序后台详解)
- 微信小程序function怎么使用(微信小程序在{{ }}中直接使用函数的方法示例)
- 怎么编写计算小程序(微信小程序实现简易计算器)
- 微信小程序计时器(微信小程序实现简单的计算器功能)
- 微信小程序开发模式(微信小程序引入Vant框架的全过程记录)
- 苹果微信小程序页面空白(iPhoneX安全区域Safe Area底部小黑条在微信小程序和H5的屏幕适配)
- 9小时搞定微信小程序开发(关于加快微信小程序开发的一些小建议)
- 微信小程序开发完整操作流程(微信小程序开发之组件设计规范)
- 微信小程序映射设置(微信小程序虚拟列表的实现示例)
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- 微信小程序实现自动定位(微信小程序实现锚点定位功能的方法实例)
- 微信小程序开发简单计算器(小程序实现计算器功能)
- 微信小程序如何请求服务器数据(微信小程序学习笔记之页面配置与路由方式)
- 微信小程序接入第三方支付的方法(小程序通过小程序云实现微信支付功能实例)
- 微信小程序转盘动画效果(微信小程序实现摇筛子效果)
- 微信小程序计数器代码(微信小程序实现计算器案例)
- 蓝底证件照怎么制作 证件照换底色 换尺寸快速搞定(蓝底证件照怎么制作)
- 你喜欢足球吗 足球如何点亮世界的(足球如何点亮世界的)
- 不可分鸽是什么梗(不可分鸽是什么梗)
- 古代的鸽子是爱情的象征,并非和平的使者(古代的鸽子是爱情的象征)
- 一课译词 放鸽子(一课译词放鸽子)
- 终于来了,淘宝更改账户名测试中,快去看看你能不能修改(淘宝更改账户名测试中)