微信小程序数学公式(微信小程序计算器实例详解)
类别:编程学习 浏览量:403
时间:2021-10-04 01:08:22 微信小程序数学公式
微信小程序计算器实例详解微信小程序计算器实例,供大家参考,具体内容如下
index.wxml
<view class="content"> <view class="num">{{num}}</view> <view class="operotor">{{op}}</view> </view> <view class="entry"> <view> <view class="item" bindtap="resetBtn">c</view> <view class="item" bindtap="delBtn">DEL</view> <view class="item" bindtap="opBtn" data-val="%">%</view> <view class="item" bindtap="opBtn" data-val="/">÷</view> </view> <view> <view class="item" bindtap="numBtn" data-val="7">7</view> <view class="item" bindtap="numBtn" data-val="8">8</view> <view class="item" bindtap="numBtn" data-val="9">9</view> <view class="item" bindtap="opBtn" data-val="*">x</view> </view> <view> <view class="item" bindtap="numBtn" data-val="4">4</view> <view class="item" bindtap="numBtn" data-val="5">5</view> <view class="item" bindtap="numBtn" data-val="6">6</view> <view class="item" bindtap="opBtn" data-val="-">-</view> </view> <view> <view class="item" bindtap="numBtn" data-val="1">1</view> <view class="item" bindtap="numBtn" data-val="2">2</view> <view class="item" bindtap="numBtn" data-val="3">3</view> <view class="item" bindtap="opBtn" data-val="+">+</view> </view> <view> <view class="item tow" bindtap="numBtn" data-val="0">0</view> <view class="item one" bindtap="dotBtn" data-val=".">.</view> <view class="item one" bindtap="opBtn" data-val="=">=</view> </view> </view>
index.css
page { display: flex; flex-direction: column; height: 100%; } .content { flex: 1; background-color: #f3f6fe; position: relative; } .content .num { position: absolute; font-size: 27pt; bottom: 5vh; right: 3vw; } .content .operotor { font-size: 15pt; position: absolute; bottom: 1vh; right: 3vw; } .entry { flex: 1; font-size: 17pt; border-top: 1rpx solid #ccc; } .entry .item { flex: 1; padding: 30rpx 0; text-align: center; flex-basis: 25%; border-left: 1rpx solid #ccc; border-bottom: 1rpx solid #ccc; } .entry > view { display: flex; } .entry > view .tow { flex: 2; } .entry > view .one { flex: 1; }
index.js
Page({ data: { num: "", // 存储数字 op: "" //存储运算符 }, result: null, isClear: false, numBtn: function(e) { var num = e.target.dataset.val //console.log(num) 得到data-val的值 console.log(this.isClear) if (this.data.num === "0" || this.isClear) { this.setData({ num: num }) this.isClear = false } else { this.setData({ num: this.data.num + num }) } }, opBtn: function(e) { var op = this.data.op var num = Number(this.data.num) this.setData({ op: e.target.dataset.val }) if (this.isClear) { return } this.isClear = true if (this.result === null) { this.result = num return } if (op === "+") { this.result = this.result + num } else if (op === "-") { this.result = this.result - num } else if (op === "*") { this.result = this.result * num } else if (op === "/") { this.result = this.result / num } else if (op === "%") { this.result = this.result % num } this.setData({ num: this.result }) }, dotBtn: function() { if (this.isClear) { this.setData({ num: "0." }) this.isClear = false return } if (this.data.num.indexOf(".") >= 0) { return } this.setData({ num: this.data.num + "." }) }, delBtn: function() { var num = this.data.num.substr(0, this.data.num.length - 1) this.setData({ num: num === "" ? "0" : num }) }, resetBtn: function() { this.result = null this.isClear = false this.setData({ num: "0", op: "" }) } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- 宝塔小程序制作(宝塔面板微信小程序使用图文教程)
- 微信小程序开发如何实现自动保存(微信小程序开发实用技巧之数据传递和存储)
- 微信小程序通知验证签名方法(微信小程序实现电子签名)
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- 微信小程序开发完整操作流程(微信小程序开发之组件设计规范)
- 微信小程序即时聊天功能怎么实现(微信小程序实现聊天室功能)
- 微信小程序计算器怎么用(微信小程序实现计算器功能)
- 微信小程序canvas 动画(微信小程序使用canvas绘制钟表)
- 微信小程序语音录入(微信小程序使用同声传译实现语音识别功能)
- 微信小程序做计算器(微信小程序实现计算器小功能)
- 微信小程序苹果部分内容打不开(微信小程序audio组件在ios端无法播放的解决办法)
- 微信小程序左右翻页效果(微信小程序实现九宫格效果)
- 微信小程序开发简单计算器(小程序实现计算器功能)
- 微信小程序映射设置(微信小程序虚拟列表的实现示例)
- 微信小程序接口返回数据怎么弄(微信小程序页面返回传值的4种解决方案汇总)
- ()
- 对你思念入骨的女人,跟你见面时会有这几种表现,藏都藏不住(对你思念入骨的女人)
- 纳兰性德绝美作,一场重逢,成就最后一首称得上惊艳的《如梦令》(纳兰性德绝美作)
- 如何快速赚钱(如何快速赚钱方法真实有效)
- 这里输入关键词(如何输入关键词)
- 熊猫中国国宝(熊猫国宝酒53酱香)
热门推荐
- asp.net 消息队列
- 微信小程序可以用百度的echarts吗(uniapp在微信小程序中使用ECharts的方法)
- react新手指引页面编写(React+TypeScript进行项目构建案例讲解)
- 如何看idea连接mysql数据库(IDEA 链接Mysql数据库并执行查询操作的完整代码)
- docker如何启动springboot(Centos8.3、docker部署springboot项目实战案例分析)
- dedecms列表栏目样式修改(在dedecms文章页中获取当前栏目字段如content字段)
- ASP.NET Web API是什么
- python怎么判断文件大小(python3实现指定目录下文件sha256及文件大小统计)
- 关闭ssl证书验证模块(开启OCSP提升https证书验证效率解决Let’s Encrypt SSL证书访问慢的问题)
- 支付宝接口中notify_url 与 return_url 的区别
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9