微信小程序计算器怎么用(用微信小程序实现计算器功能)
类别:编程学习 浏览量: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 }) }, })
效果图如下
微信开发者工具下载地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 微信小程序js 抽奖概率(小程序实现筛子抽奖)
- 微信小程序签名怎么操作(微信小程序实现简单手写签名组件的方法实例)
- 微信小程序开发模式(微信小程序引入Vant框架的全过程记录)
- 微信小程序的交通码(微信小程序中实现车牌输入功能)
- 微信小程序获取时间(微信小程序wxs日期时间处理的实现示例)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- 微信小程序可以用百度的echarts吗(uniapp在微信小程序中使用ECharts的方法)
- 微信小程序计算器怎么用(微信小程序实现计算器功能)
- 微信小程序css使用技巧(微信小程序 CSS filter滤镜的使用示例详解)
- 微信小程序映射设置(微信小程序虚拟列表的实现示例)
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- pythondjango后台管理(基于腾讯云服务器部署微信小程序后台服务Python+Django)
- 微信小程序引用模板的函数(微信小程序页面与组件之间信息传递与函数调用)
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- 微信小程序单选框组件(微信小程序picker多列选择器mode = multiSelector)
- 微信小程序如何请求服务器数据(微信小程序学习笔记之页面配置与路由方式)
- 大果肉搭配薄瓜皮, 绿宝 脆甜爽口,不愧是甜瓜中的 佼佼者(大果肉搭配薄瓜皮)
- 河南尉氏县因地制宜发展果蔬种植 水坡镇绿宝甜瓜变 金瓜(河南尉氏县因地制宜发展果蔬种植)
- 谢广坤,你这么欺负谢腾飞,良心不会痛吗(你这么欺负谢腾飞)
- 乡村爱情15 宋晓峰怀疑自己孩子,腾飞与姜奶奶亲子鉴定出结果(宋晓峰怀疑自己孩子)
- 《乡村爱情13》开播,新版刘能以假乱真,编剧思维进入瓶颈(新版刘能以假乱真)
- 当年的 白洋淀战神 练肌肉 嘎子哥也成为行走的荷尔蒙(当年的白洋淀战神)
热门推荐
- python itchat库介绍(Python利用itchat库向好友或者公众号发消息的实例)
- CSS3中user-select的用法
- 阿里云主机Windows 2008 32位 64位自助正版激活图文教程(阿里云主机Windows 2008 32位 64位自助正版激活图文教程)
- docker 镜像导入导出(Docker镜像的导入导出代码实例)
- docker部署spring boot(Spring Boot 打包上传Docker 仓库的详细步骤)
- 简单laravel框架教程交流(使用composer 安装 laravel框架的方法图文详解)
- sqlserver定时计划(sql server deadlock跟踪的4种实现方法)
- python编程中冒号的用法(浅谈python中get pass用法)
- netcoredocker视频教程(Docker安装部署Net Core实现过程解析)
- phpfpm优化方法(php-fpm超时时间设置request_terminate_timeout资源问题分析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9