微信小程序计算器怎么用(用微信小程序实现计算器功能)
类别:编程学习 浏览量:2807
时间:2021-10-04 01:01:51 微信小程序计算器怎么用
用微信小程序实现计算器功能本文是用微信小程序写的一个简单的计算器,有兴趣的小伙伴可以了解一下。
页面部分
<view class='box'> <view class='txt'>{{screenNum}}</view> <view capture-bind:touchstart="compute"> <view> <button data-val='clear' class='boxtn btn1'>AC</button> <button data-val='back' class='boxtn btn1'>←</button> <button data-val='#' class='boxtn btn1'>#</button> <button data-val='/' class='boxtn btn'>/</button> </view> <view> <button data-val='7' class='boxtn'>7</button> <button data-val='8' class='boxtn'>8</button> <button data-val='9' class='boxtn'>9</button> <button data-val='*' class='boxtn btn'>*</button> </view> <view> <button data-val='4' class='boxtn'>4</button> <button data-val='5' class='boxtn'>5</button> <button data-val='6' class='boxtn'>6</button> <button data-val='-' class='boxtn btn'>-</button> </view> <view> <button data-val='1' class='boxtn'>1</button> <button data-val='2' class='boxtn'>2</button> <button data-val='3' class='boxtn'>3</button> <button data-val='+' class='boxtn btn'>+</button> </view> <view> <button data-val='1' class='boxtn btn2'>0</button> <button data-val='.' class='boxtn'>.</button> <button data-val='=' class='boxtn btn'>=</button> </view> </view> </view>
样式部分
.box{ width:100%; height: 700px; background: #000; } .txt{ color: #fff; width: 100%; height:120px; font-size: 50px; text-align: right; } .boxtn{ width: 90px; height:90px; display:block; float:left; border-radius: 50%; line-height: 90px; text-align: center; margin-left: 3px; margin-top: 5px; color:#fff; background: #333333; font-weight: bold; font-size: 25px; } .btn{ background: #f09a37; } .btn1{ background: #a5a5a5; color:#000; } .btn2{ width: 180px; border-radius: 40px; }
js部分
//index.js //获取应用实例 const app = getApp() Page({ /** * 页面的初始数据 */ data: { screenNum: 0,//屏幕显示的数 currentNum: '',//当前输入的数 storage: 0,//存储的数 operator: '',//运算符 off: false, }, compute: function (e) { var btn_num = e.target.dataset.val; var obj = this; if (!isNaN(btn_num)) { if (obj.data.off == true) { obj.data.currentNum = '' obj.data.off = false; } obj.data.currentNum += btn_num obj.data.currentNum = Number(obj.data.currentNum); obj.data.currentNum = obj.data.currentNum.toString(); } else { switch (btn_num) { case '+': case '-': case '*': case '/': case '=': // 将当前屏幕上的数字和本次的操作符存储到变量 if (obj.data.storage == 0) { obj.data.storage = obj.data.currentNum; obj.data.operator = btn_num; } else { if (obj.data.off != true) { if (obj.data.operator == '+') { obj.data.currentNum = Number(obj.data.storage) + Number(obj.data.currentNum) } else if (obj.data.operator == '-') { obj.data.currentNum = Number(obj.data.storage) - Number(obj.data.currentNum) } else if (obj.data.operator == '*') { obj.data.currentNum = Number(obj.data.storage) * Number(obj.data.currentNum) } else if (obj.data.operator == '/') { obj.data.currentNum = Number(obj.data.storage) / Number(obj.data.currentNum) } } obj.data.storage = obj.data.currentNum; obj.data.operator = btn_num; } obj.data.off = true; break; case 'clear': obj.data.storage = 0; obj.data.currentNum = '0'; obj.data.operator = ''; break; case 'back': obj.data.currentNum = obj.data.currentNum.slice(0, -1); if (obj.data.currentNum == '') { obj.data.currentNum = '0'; } break; case '.': if (obj.data.currentNum.indexOf('.') == -1) { // 判断是否已包含“.” obj.data.currentNum += btn_num } break; } } obj.setData({ screenNum: obj.data.currentNum }) }, })
效果图如下
微信开发者工具下载地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 微信小程序怎么绕过人脸的(详解微信小程序官方人脸核身认证)
- flask项目微信小程序(Python Flask 搭建微信小程序后台详解)
- 微信小程序接入第三方支付的方法(小程序通过小程序云实现微信支付功能实例)
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- 宝塔小程序制作(宝塔面板微信小程序使用图文教程)
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- 微信小程序function怎么使用(微信小程序在{{ }}中直接使用函数的方法示例)
- 微信小程序左右翻页效果(微信小程序实现九宫格效果)
- 微信小程序的交通码(微信小程序中实现车牌输入功能)
- 微信小程序存token(小程序开发实现access_token统一管理)
- 微信小程序静态页面详情(微信小程序基础教程之echart的使用)
- php开发微信小程序后台步骤流程(基于PHP实现微信小程序客服消息功能)
- 微信小程序引用模板的函数(微信小程序页面与组件之间信息传递与函数调用)
- 微信小程序可以用h5开发不(微信小程序webView嵌入H5的方法实例)
- 微信小程序获取时间(微信小程序wxs日期时间处理的实现示例)
- 微信小程序canvas 动画(微信小程序使用canvas绘制钟表)
- 朱鹤松被不断认可,凤凰传奇玲花喊话岳云鹏,索要老朱演出门票(朱鹤松被不断认可)
- 元宵晚会槽点多,芒果台上来就假唱,岳云鹏不说相声改评书了(元宵晚会槽点多)
- 岳云鹏跟凤凰传奇谈心,说出了人生中最重要的三个人,这才成功(岳云鹏跟凤凰传奇谈心)
- 爱情可以当饭吃吗(爱情能当饭吃吗)
- Top 3 JSHS《运动与健康科学 英文 》跻身SCI体育学期刊世界前三(Top3JSHS运动与健康科学)
- 体坛传媒LOGO全新升级,多元发展迈出坚实步伐(体坛传媒LOGO全新升级)
热门推荐
- tomcat的startup闪退的原因(直接双击启动tomcat中的startup.bat闪退原因及解决方法)
- php开发api接口登录(PHP调用接口API封装的例子)
- idea配置tomcat启动web项目(如何在IntelliJ IDEA 2018上配置Tomcat并运行第一个JavaWeb项目)
- python如何把字符串转换成数字(python实现字符串加密成纯数字)
- dedecms的自由列表管理(dedecms TAG标签列表分页链接优化方法)
- 怎么搭建服务器然后搭建网站(用自己的电脑做服务器搭建网站并让互联网访问)
- iframe标签教程(关于解决iframe标签嵌套问题的解决方法)
- Oracle TO_CHAR的使用
- django参数判断(Django保护敏感信息的方法示例)
- 云主机和免备案空间(香港云主机免备案利弊分析)