微信小程序计算器怎么用(用微信小程序实现计算器功能)
类别:编程学习 浏览量: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 }) }, })
效果图如下
微信开发者工具下载地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- 微信小程序获取手机信息(微信小程序获取手机号的踩坑记录)
- 微信小程序ui聊天窗口(微信小程序实现简单聊天室)
- 微信小程序swiper大小调整(微信小程序swiper-dot中的点如何改成滑块详解)
- 微信小程序怎么绕过人脸的(详解微信小程序官方人脸核身认证)
- 微信小程序css使用技巧(微信小程序 CSS filter滤镜的使用示例详解)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- 微信小程序js 抽奖概率(小程序实现筛子抽奖)
- 怎么编写计算小程序(微信小程序实现简易计算器)
- 微信小程序做计算器(微信小程序实现计算器小功能)
- 微信小程序scrollview 截图(微信小程序scroll-view不能左右滑动问题的解决方法)
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- 微信小程序双人游戏横屏(微信小程序实现拼图游戏)
- 微信小程序计算器怎么用(微信小程序实现计算器功能)
- 微信小程序转盘动画效果(微信小程序实现摇筛子效果)
- flask项目微信小程序(Python Flask 搭建微信小程序后台详解)
- 翼龙贷组织出借人调研 感受鄱阳 借 来的致富路(翼龙贷组织出借人调研)
- 2023新国风戏曲教育寒假集训班汇报演出《戏娃闹元宵》图文报道(2023新国风戏曲教育寒假集训班汇报演出戏娃闹元宵图文报道)
- 九儿《狐踪谍影》出演热血女特警,戏份杀青受关注(九儿狐踪谍影出演热血女特警)
- 红色代表什么(红色代表什么寓意)
- 蓝天代表什么(蓝天代表什么生肖)
- 今天要吃什么(今天要吃什么菜)
热门推荐
- docker和jenkins部署的区别(docker搭建jenkins服务的示例)
- 如何使用rem开发移动端页面(移动端rem布局的两种实现方法)
- dedecms关闭站点(dedecms搬家后出现/include/templets/default/index.htm Not Found!解决方案)
- docker安装java8(docker安装java环境的实现步骤)
- laravel请求处理流程(详解如何实现Laravel的服务容器的方法示例)
- 阿里云虚拟主机限制ip访问次数(轻云服务器或虚拟主机站点域名解析不正确的分析与解决方法)
- python flask部署实例(Python Flask框架扩展操作示例)
- 云主机和免备案空间(香港云主机免备案利弊分析)
- kalilinux安装到u盘教程学习(kali安装docker和portainer的配置方法)
- sql function函数的用法(SQl Function 创建函数实例介绍)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9