微信小程序计时器(微信小程序实现简单的计算器功能)
类别:编程学习 浏览量: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 } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 微信小程序css使用技巧(微信小程序 CSS filter滤镜的使用示例详解)
- 微信小程序映射设置(微信小程序虚拟列表的实现示例)
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- 微信小程序做计算器(微信小程序实现计算器小功能)
- 微信小程序canvas 动画(微信小程序使用canvas绘制钟表)
- 微信小程序日期选择器有星期天(微信小程序 滚动选择器时间日期详解及实例代码)
- 微信小程序数学公式(微信小程序计算器实例详解)
- 微信小程序单选框组件(微信小程序picker多列选择器mode = multiSelector)
- 微信小程序企业微信打卡(使用Python实现企业微信的自动打卡功能)
- 微信小程序引用模板的函数(微信小程序页面与组件之间信息传递与函数调用)
- 微信小程序开发完整操作流程(微信小程序开发之组件设计规范)
- 微信小程序function怎么使用(微信小程序在{{ }}中直接使用函数的方法示例)
- 微信小程序计时器(微信小程序实现简单的计算器功能)
- 微信小程序左右翻页效果(微信小程序实现九宫格效果)
- 微信小程序ui聊天窗口(微信小程序实现简单聊天室)
- 微信小程序转盘动画效果(微信小程序实现摇筛子效果)
- 谁说女子不如男 范冰冰演的武则天只是其一,另外两位你认识吗(谁说女子不如男)
- 杯酒人生---瓦伦丁酒杯和奥丁格啤酒(杯酒人生---瓦伦丁酒杯和奥丁格啤酒)
- 中秋节买啤酒,预算超过7元试试这8种啤酒,麦香浓郁都是真啤酒(预算超过7元试试这8种啤酒)
- CellPress旗下的6 期刊,国人友刊来了解一下吧(CellPress旗下的6期刊国人友刊来了解一下吧)
- ()
- SCI检索 SSCI检索 EI检索 ISTP检索 CSCD检索简介(SCI检索SSCI检索EI检索)
热门推荐
- mysql 操作系统时区(mysql时区查看与设置方法)
- html5拖动效果怎么写(Html5 滚动穿透的方法)
- python协程使用教程(对Python协程之异步同步的区别详解)
- phpzip压缩原理(PHP生成zip压缩包的常用方法示例)
- xshell服务器(如何使用Xshell连接云服务器)
- docker下运行python3(使用Docker+jenkins+python3环境搭建超详细教程)
- URL如何编码与解码
- sql数据拆分插入另一个表(Sql Server数据把列根据指定内容拆分数据的方法实例)
- react usestate实现原理(浅谈react useEffect闭包的坑)
- laravel获取数据(laravel 判断查询数据库返回值的例子)