本文小編為大家詳細介紹“怎么用微信小程序?qū)崿F(xiàn)計算器功能”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“怎么用微信小程序?qū)崿F(xiàn)計算器功能”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),汝城企業(yè)網(wǎng)站建設(shè),汝城品牌網(wǎng)站建設(shè),網(wǎng)站定制,汝城網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,汝城網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

頁面部分

<view class="box">
     <view class="txt">{{screenNum}}</view> 
    <view capture-bind:touchstart="compute">
     <view>
       <button data-val="clear" class="boxtn btn1">AC</button>
       <button data-val="back" class="boxtn btn1">←</button>
       <button data-val="#" class="boxtn btn1">#</button>
       <button data-val="/" class="boxtn btn">/</button>
     </view>
       <view>
       <button data-val="7" class="boxtn">7</button>
       <button data-val="8" class="boxtn">8</button>
       <button data-val="9" class="boxtn">9</button>
       <button data-val="*" class="boxtn btn">*</button>
     </view>
       <view>
       <button data-val="4" class="boxtn">4</button>
       <button data-val="5" class="boxtn">5</button>
       <button data-val="6" class="boxtn">6</button>
       <button data-val="-" class="boxtn btn">-</button>
     </view>
       <view>
       <button data-val="1" class="boxtn">1</button>
       <button data-val="2" class="boxtn">2</button>
       <button data-val="3" class="boxtn">3</button>
       <button data-val="+" class="boxtn btn">+</button>
     </view>
       <view>
       <button data-val="1" class="boxtn btn2">0</button>
       <button data-val="." class="boxtn">.</button>
       <button data-val="=" class="boxtn btn">=</button>
     </view>
    </view>
</view>

樣式部分

.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({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    screenNum: 0,//屏幕顯示的數(shù)
    currentNum: "",//當前輸入的數(shù)
    storage: 0,//存儲的數(shù)
    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 "=":
          // 將當前屏幕上的數(shù)字和本次的操作符存儲到變量

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

})

效果圖如下

微信開發(fā)者工具下載地址

讀到這里，這篇“怎么用微信小程序?qū)崿F(xiàn)計算器功能”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁題目：怎么用微信小程序?qū)崿F(xiàn)計算器功能
鏈接分享：http://jinyejixie.com/article6/iissog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、網(wǎng)站營銷、動態(tài)網(wǎng)站、標簽優(yōu)化、用戶體驗、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)