用微信小程序实现计算器功能
本文是用微信小程序写的一个简单的计算器,有兴趣的小伙伴可以了解一下。
页面部分
{{screenNum}}
样式部分
.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_numobj.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})},})
效果图如下
文章图片
微信开发者工具下载地址
【用微信小程序实现计算器功能】
文章图片
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 事件处理程序
- 编写字典程序
- Java程序员阅读源码的小技巧,原来大牛都是这样读的,赶紧看看!
- 小程序有哪些低成本获客手段——案例解析
- 程序员|【高级Java架构师系统学习】毕业一年萌新的Java大厂面经,最新整理
- 微信小程序基础知识
- VueX(Vuex|VueX(Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- 使用Promise对微信小程序wx.request请求方法进行封装
- 程序员客栈TOP收入的萌系开发者心得|程序员客栈TOP收入的萌系开发者心得 - 雨晴