导航：首页 > 开发技术 >

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

发表于：2026-11-03 作者：千家信息网编辑

千家信息网最后更新 2026年11月03日，本文小编为大家详细介绍"怎么用微信小程序实现计算器功能"，内容详细，步骤清晰，细节处理妥当，希望这篇"怎么用微信小程序实现计算器功能"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知

千家信息网最后更新 2026年11月03日怎么用微信小程序实现计算器功能

本文小编为大家详细介绍"怎么用微信小程序实现计算器功能"，内容详细，步骤清晰，细节处理妥当，希望这篇"怎么用微信小程序实现计算器功能"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

页面部分

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

效果图如下

微信开发者工具下载地址

读到这里，这篇"怎么用微信小程序实现计算器功能"文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。

很赞哦！