189 8069 5689

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

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

成都创新互联公司是一家集网站建设,汝城企业网站建设,汝城品牌网站建设,网站定制,汝城网站建设报价,网络营销,网络优化,汝城网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

页面部分


     {{screenNum}} 
    
     
       AC
       ←
       #
       /
     
       
       7
       8
       9
       *
     
       
       4
       5
       6
       -
     
       
       1
       2
       3
       +
     
       
       0
       .
       =
     
    

样式部分

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

})

效果图如下

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

微信开发者工具下载地址

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

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


本文标题：怎么用微信小程序实现计算器功能
链接分享：http://cdxtjz.cn/article/iissog.html

其他资讯