微信小程序数学公式(微信小程序计算器实例详解)
类别:编程学习 浏览量: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: "" }) } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 微信小程序单选框组件(微信小程序picker多列选择器mode = multiSelector)
- 微信小程序日期选择器有星期天(微信小程序 滚动选择器时间日期详解及实例代码)
- 微信小程序计数器代码(微信小程序实现计算器案例)
- 微信小程序左右翻页效果(微信小程序实现九宫格效果)
- 微信小程序ui聊天窗口(微信小程序实现简单聊天室)
- 微信小程序scrollview 截图(微信小程序scroll-view不能左右滑动问题的解决方法)
- 微信小程序引用模板的函数(微信小程序页面与组件之间信息传递与函数调用)
- 微信小程序swiper大小调整(微信小程序swiper-dot中的点如何改成滑块详解)
- 微信小程序可以用百度的echarts吗(uniapp在微信小程序中使用ECharts的方法)
- 微信小程序获取时间(微信小程序wxs日期时间处理的实现示例)
- 微信小程序即时聊天功能怎么实现(微信小程序实现聊天室功能)
- 9小时搞定微信小程序开发(关于加快微信小程序开发的一些小建议)
- 微信小程序开发模式(微信小程序引入Vant框架的全过程记录)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- 微信小程序抽签如何抽中(JavaScript实现班级抽签小程序)
- 微信小程序转盘动画效果(微信小程序实现摇筛子效果)
- 原创图画书,以儿童视角讲述中国故事(以儿童视角讲述中国故事)
- 八月再见 愿你岁月不扰,余生静好(八月再见愿你岁月不扰)
- 赏读 八月再见,九月你好(赏读八月再见九月你好)
- 散文 八月再见,九月,我在风中等你(散文八月再见九月)
- 8月再见 9月你好(8月再见)
- 魔兽世界 设计师爆料,原始版本并无PVP,跨阵营属于返璞归真(魔兽世界设计师爆料)
热门推荐
- ssl服务器搭建的步骤(windows apache环境下部署SSL证书让网站支持https的配置方法)
- idea docker使用(最新IDEA快速实现Docker镜像部署运行的过程详解)
- php中function函数的用法(PHP中quotemeta函数的用法讲解)
- docker镜像无法删除 Error:No such image:xxxxxx解决(docker镜像无法删除 Error:No such image:xxxxxx解决)
- docker如何进入容器(详解如何进入、退出docker容器的方法)
- mysql程序中判断select返回空值(解决MySQL读写分离导致insert后select不到数据的问题)
- php把当前网页生成pdf(php转换上传word文件为PDF的方法基于COM组件)
- nginxdocker界面(Docker部署nginx实现过程图文详解)
- 云服务器如何进入(云服务器配置怎么看?)
- php7 入门(php7新特性的理解和比较总结)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9