日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

本篇內(nèi)容介紹了“小程序怎么實現(xiàn)計算器功能”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

目前累計服務(wù)客戶成百上千家，積累了豐富的產(chǎn)品開發(fā)及服務(wù)經(jīng)驗。以網(wǎng)站設(shè)計水平和技術(shù)實力，樹立企業(yè)形象，為客戶提供網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計、網(wǎng)站策劃、網(wǎng)頁設(shè)計、網(wǎng)絡(luò)營銷、VI設(shè)計、網(wǎng)站改版、漏洞修補等服務(wù)。創(chuàng)新互聯(lián)始終以務(wù)實、誠信為根本，不斷創(chuàng)新和提高建站品質(zhì)，通過對領(lǐng)先技術(shù)的掌握、對創(chuàng)意設(shè)計的研究、對客戶形象的視覺傳遞、對應(yīng)用系統(tǒng)的結(jié)合，為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進步。

實現(xiàn)模擬手機上的計算器，輸入即可運算

本頁面是做一個計算收款的頁面，如果不需要下面的內(nèi)容可以刪除掉

wxml

  {{express}}
  ={{result}}


  
    
      AC
      
        
      
      %
      ÷
    
    
      7
      8
      9
      ×
    
    
      4
      5
      6
      -
    
    
      1
      2
      3
      +
    
    
      0
      .
      =
    
  
  
    
    
      
      人工收款
    
    收款碼收款
  

js

data: {
    express: "", //第一行的表達式
    result: "0", //第二行的結(jié)果
    calc2: {
      str: "", //臨時字符串
      strList: [], //中綴表達式存儲（隊列先進先出）
      strListP: [], //后綴表達式（隊列先進先出）
      list: [], //存放運算符的堆棧 （先進后出）
      count: [], //計算表達式堆棧（先進后出）
      flag: 0 //表示字符串最后一位是否是運算符號位
    },
    isqr: false,
  },
   //給所有text或view綁定此事件，同時增加對應(yīng)的自定義屬性值
  clickKeyBoard(e) {
    let that = this;
    let input = e.currentTarget.dataset.con //獲取每次輸入的內(nèi)容
    if (input == "c") {
      that.handleClear();
    } else if (input == "←") {
      that.handleDelete();
    } else {
      //調(diào)用處理字符串
      that.handleInfo(input);

    }


  },

  //處理本地用戶的輸入操作
  handleInfo(input) {
    if (this.data.calc2.str.length == 0) { //第一次點擊
      if (input == "-" || this.checkShuZi(input)) { //為減號
        this.addStr(input);
      } else {
        return;
      }
    } else {
      if (this.data.calc2.flag == 1) { //說明最后一位是符號
        if (this.checkFuHao(input)) {
          this.data.calc2.str = this.data.calc2.str.substring(0, this.data.calc2.str.length - 1); //去掉最后一位符號，添加最新的符號進去
          this.addStr(input);
        } else {
          this.addStr(input);
        }
        console.log();
      } else {
        this.addStr(input);
        this.result();
      }
    }
    this.result();
  },

  //客戶點擊等號了
  result() {
    //每次點擊等號重新把列表給空
    this.data.calc2.strList.length = 0;
    this.data.calc2.strListP.length = 0;
    this.data.calc2.list.length = 0;
    this.data.calc2.count.length = 0;

    //將表達式變成中綴表達式隊列
    this.expressToStrList(this.data.express);
    console.log(this.data.calc2.strList);

    //將中綴表達式集合賦值給臨時變量
    let tempList = this.data.calc2.strList;
    this.expressToStrListP(tempList);
    console.log(this.data.calc2.strListP);

    //最終的計算
    let tempP = this.data.calc2.strListP
    for (let m in tempP) {
      if (this.checkFuHao2(tempP[m])) { //不含點號的符號方法判斷
        let m1 = this.data.calc2.count[0]; //取出第一個數(shù)據(jù)
        this.data.calc2.count.shift(); //取出后刪除該數(shù)據(jù)
        let m2 = this.data.calc2.count[0];
        this.data.calc2.count.shift();
        // console.log("m1是" +m1);
        // console.log("m2是" + m2);
        // console.log("運算符是" + tempP[m]);
        // console.log("計算結(jié)果是：" + this.countDetail(m2, tempP[m], m1));
        this.data.calc2.count.unshift(this.countDetail(m2, tempP[m], m1)); //將計算結(jié)果放到count中
      } else {
        this.data.calc2.count.unshift(tempP[m]) //將數(shù)字壓進去
      }
    }
    console.log("最終的計算結(jié)果是" + parseFloat(this.data.calc2.count[0]).toFixed(2));
    this.setData({
      result: this.data.calc2.count[0]
    });
  },

  //實際具體計算
  countDetail(e1, e2, e3) {
    let result = 0.0;
    console.log(e1);
    console.log(e2);
    console.log(e3);
    try {
      if (e2 == "×") {
        if (typeof(e1) != "undefined") {
          result = parseFloat(e1) * parseFloat(e3);
        } else {
          result = parseFloat(e3);
        }
      } else if (e2 == "÷") {
        if (typeof(e1) != "undefined") {
          result = parseFloat(e1) / parseFloat(e3);
        } else {
          result = parseFloat(e3);
        }
      } else if (e2 == "%") {
        if (typeof(e1) != "undefined") {
          result = parseFloat(e1) / parseFloat(e3);
        } else {
          result = parseFloat(e3);
        }
      } else if (e2 == "+") {
        if (typeof(e1) != "undefined") {
          result = parseFloat(e1) + parseFloat(e3);
        } else {
          result = parseFloat(e3);
        }
      } else {
        if (typeof (e1) != "undefined") {
          result = parseFloat(e1) - parseFloat(e3);
        } else {
          result = parseFloat(e3);
        }
      }
    } catch (error) {

    }
    return result;
  },

  //將中綴表達式集合轉(zhuǎn)變?yōu)楹缶Y表達式集合
  expressToStrListP(tempList) {
    for (let item in tempList) {
      if (this.checkFuHao2(tempList[item])) { //不含點號的符號方法判斷
        if (this.data.calc2.list.length == 0) {
          this.data.calc2.list.unshift(tempList[item]); //直接添加添加運算符
        } else {
          if (this.checkFuHaoDX(this.data.calc2.list[0], tempList[item])) {
            for (let x in this.data.calc2.list) {
              this.data.calc2.strListP.push(this.data.calc2.list[x]); //將運算符都放到listP中
            }
            this.data.calc2.list.length = 0; //循環(huán)完把list置空
            this.data.calc2.list.unshift(tempList[item]); //加新元素進去
          } else {
            this.data.calc2.list.unshift(tempList[item]); //直接添加添加運算符
          }
        }
      } else {
        this.data.calc2.strListP.push(tempList[item]); //數(shù)字直接加到后綴集合中
      }
    }
    //循環(huán)完有可能最后一個是數(shù)字了，取到的不是字符，那么運算符里剩余的還的加到listP中
    if (this.data.calc2.list.length > 0) {
      for (let x in this.data.calc2.list) {
        this.data.calc2.strListP.push(this.data.calc2.list[x]); //將運算符都放到listP中
      }
      this.data.calc2.list.length = 0; //循環(huán)完把list置空
    }
  },

  //判斷兩個運算符的優(yōu)先級(m1是list集合中最后加進去的那個元素比較將要進來的元素，如果m1比m2大，彈出list集合到listp中，再把m2加到list中，否則直接將m2加入list)
  checkFuHaoDX(m1, m2) {
    if ((m1 == "%" || m1 == "×" || m1 == "÷") && (m2 == "-" || m2 == "+")) {
      return true;
    } else {
      return false;
    }
  },

  //將字符串表達式變成中綴隊列
  expressToStrList(express) {
    let temp = ""; //定義臨時變量
    //將表達式改為中綴隊列
    for (let i = 0; i < express.length; i++) {
      if (i == 0 && express[i] == "-") {
        temp = temp + express[i];
      } else {
        if (this.checkShuZi2(express[i])) { //如果i是數(shù)字
          temp = temp + express[i];
        } else {
          if (temp.length > 0) {
            if (express[i] == ".") {
              temp = temp + express[i];
            } else {
              this.data.calc2.strList.push(parseFloat(temp));
              temp = "";
              this.data.calc2.strList.push(express[i]);
            }
          } else {
            temp = temp + express[i];
          }
        }
      }
    }
    //循環(huán)到最后再看temp中有沒有數(shù)字了，如果有加進來
    if (temp.length > 0 && this.checkShuZi(temp.substring(temp.length - 1))) {
      this.data.calc2.strList.push(parseFloat(temp));
      temp = "";
    }
  },

  //處理客戶輸入清除鍵
  handleClear() {
    this.data.calc2.str = "";
    this.data.calc2.strList.length = 0;
    this.data.calc2.strListP.length = 0;
    this.data.calc2.list.length = 0;
    this.data.calc2.count.length = 0;
    this.data.calc2.minusFlag = 0;
    this.setData({
      express: "",
      result: ""
    });
  },
  //處理客戶輸入回退鍵
  handleDelete() {
    let that = this;
    let str = that.data.calc2.str;
    if (str.length > 0) {
      str = str.substring(0, str.length - 1);
      that.data.calc2.str = str;
      that.setData({
        express: str,
      });
    } else {
      return;
    }
  },

  //判斷是否是運算符（含點號，用在組織表達式時 .不能重復輸入）
  checkFuHao(input) {
    if (input == "-" || input == "+" || input == "÷" || input == "%" || input == "×" || input == ".") {
      return true;
    } else {
      return false;
    }
  },

  //判斷是否是運算符（不含點號）
  checkFuHao2(input) {
    if (input == "-" || input == "+" || input == "÷" || input == "%" || input == "×") {
      return true;
    } else {
      return false;
    }
  },

  //判斷是否是數(shù)字
  checkShuZi(input) {
    if (input == "0" || input == "1" || input == "2" ||
      input == "3" || input == "4" || input == "5" ||
      input == "6" || input == "7" || input == "8" || input == "9") {
      return true;
    } else {
      return false;
    }
  },

  //判斷是否是數(shù)字(包含.號，用在表達式轉(zhuǎn)中綴方法中)
  checkShuZi2(input) {
    if (input == "0" || input == "1" || input == "2" ||
      input == "3" || input == "4" || input == "5" ||
      input == "6" || input == "7" || input == "8" || input == "9" || input == ".") {
      return true;
    } else {
      return false;
    }
  },

  //給字符串添加新字符(直接追加 在判斷是否要改變變量flag)
  addStr(input) {
    this.data.calc2.str = this.data.calc2.str + input;
    if (this.checkFuHao(input)) {
      this.data.calc2.flag = 1; //設(shè)置標記位位1
    } else {
      this.data.calc2.flag = 0;
    }
    this.setData({
      express: this.data.calc2.str
    });
  },

wxss

/* pages/index/collect-money/collect-money.wxss */

page {
  background-color: #f8f8f8;
}

.bottom-handle {
  height: 100rpx;
  width: 100%;
  display: flex;
  align-items: center;
}

.fixation-box {
  position: fixed;
  bottom: 0;
  width: 750rpx;
}

.sweep-code-verification {
  background: #fff;
  border-top: 1rpx solid #e3e3e3;
  width: 220rpx;
  color: #333;
}

.artificial-collection, .sweep-code-verification {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 24rpx;
  justify-content: center;
}

.artificial-collection {
  background: #f3b055;
  width: 248rpx;
  color: #fff;
}

.payment-code {
  background-image: linear-gradient(203deg, #6f6f6f 0%, #3c3c3c 96%);
  flex: 1;
  font-size: 34rpx;
  color: #fff;
  text-align: center;
  line-height: 100rpx;
}

.sweep-code-verification image {
  width: 40rpx;
  height: 40rpx;
}

.artificial-collection image {
  width: 40rpx;
  height: 40rpx;
}

.calculator-box {
  background-color: #fff;
}

.calculator-line {
  display: flex;
  align-items: center;
}

.boxtn {
  width: 25%;
  height: 154rpx;
  border-left: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calculator-box .calculator-line:last-child {
  border-bottom: none;
}

.calculator-line {
  border-bottom: 1rpx solid #dedede;
}

.btn1, .btn2 {
  border-right: 1rpx solid #dedede;
}

.btn2 {
  width: 50%;
}

.equal {
  background: #f3b055;
  font-size: 61rpx;
  color: #fff;
}

.num {
  font-size: 60rpx;
  color: #000;
}

.clear {
  font-size: 48rpx;
  color: #f3b055;
}

.percent {
  font-size: 60rpx;
  color: #000;
}

.charge-content {
  background: #fff;
  border-radius: 24rpx;
  width: 540rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.charge-title {
  background: #f3b055;
  border-radius: 12px 12px 0 0;
  width: 100%;
  height: 92rpx;
  font-size: 34rpx;
  line-height: 92rpx;
  text-align: center;
  color: #fff;
}

.charge-money {
  font-size: 60rpx;
  color: #333;
  line-height: 84rpx;
  margin-top: 35rpx;
}

.charge-propmt {
  font-size: 28rpx;
  color: #999;
  line-height: 42rpx;
  padding-bottom: 40rpx;
}

.charge-btn {
  display: flex;
  align-items: center;
  height: 100rpx;
  border-top: 1rpx solid #ddd;
  width: 100%;
}

.charge-cancel, .charge-confirm {
  flex: 1;
  text-align: center;
  line-height: 100rpx;
  font-size: 34rpx;
}

.charge-cancel {
  color: #999;
  border-right: 1rpx solid #ddd;
}

.charge-confirm {
  color: #f3b055;
}

.successful-content {
  background: #fff;
  border-radius: 24rpx;
  width: 540rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.success-icon {
  width: 120rpx;
  margin-top: 45rpx;
  height: 120rpx;
}

.successful-title {
  font-size: 34rpx;
  color: #333;
  line-height: 42rpx;
  padding: 30rpx 0;
  font-weight: 600;
}

.clear-icon {
  width: 80rpx;
  height: 80rpx;
}

.calculate-box {
  position: fixed;
  top: 0;
  bottom: 875rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0 50rpx;
}

.result-num {
  font-size: 88rpx;
  color: #333;
  line-height: 124rpx;
}

.calculate-txt {
  font-size: 60rpx;
  color: #333;
  line-height: 84rpx;
  margin-top: auto;
  word-wrap: break-word;
  text-align: right;
  word-break: break-all;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.suspend-box{
  height: 64rpx;
  background-color: rgba(0, 0, 0, .5);
  position: fixed;
  top: 70rpx;
  left: 0;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: 24rpx;
  padding: 0 20rpx;
  border-radius: 0 100rpx 100rpx 0;
  z-index: 9;
}
.close-suspend{
  width: 30rpx;
  height: 30rpx;
}

“小程序怎么實現(xiàn)計算器功能”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

分享標題：小程序怎么實現(xiàn)計算器功能
轉(zhuǎn)載注明：http://www.dlmjj.cn/article/ggscjh.html