用微信小程序实现计算器功能

本文是用微信小程序写的一个简单的计算器,有兴趣的小伙伴可以了解一下。
页面部分

{{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})},})

效果图如下
用微信小程序实现计算器功能
文章图片

微信开发者工具下载地址
【用微信小程序实现计算器功能】用微信小程序实现计算器功能
文章图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    推荐阅读