javascript如何實(shí)現(xiàn)計(jì)算器功能

這篇文章給大家分享的是有關(guān)javascript如何實(shí)現(xiàn)計(jì)算器功能的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

1、計(jì)算器功能介紹

可以實(shí)現(xiàn)數(shù)據(jù)的加(+)，減(-)，乘(*)，除(/)，取余運(yùn)算(%)，以及實(shí)現(xiàn)數(shù)據(jù)的刪除(Del)和清空功能(C)。

2、計(jì)算器頁面設(shè)計(jì)

1、導(dǎo)航欄部分

{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "計(jì)算器"
}

2、數(shù)據(jù)部分

data:{
  //  data中只放置初始數(shù)據(jù)
  num:"1",
  op:" "//記錄運(yùn)算符號(hào)
 }

3、index.wxml布局頁面

<view class="result">
    <view class="result-num">{{num}}</view>
    <view class="result-op">{{op}}</view>
</view>
<view class="btns">
  <view>
    <view hover-class="bg" bindtap="reSetBtn">C</view>
    <view hover-class="bg" bindtap="delBtn">Del</view>
    <view hover-class="bg" bindtap="opBtn" data-val="%">%</view>
    <view hover-class="bg" bindtap="opBtn" data-val="/">/</view>
  </view>
  <view>
    <view hover-class="bg" bindtap="numBtn" data-val="7">7</view>
    <view hover-class="bg" bindtap="numBtn" data-val="8">8</view>
    <view hover-class="bg" bindtap="numBtn" data-val="9">9</view>
    <view hover-class="bg" bindtap="opBtn" data-val="*">*</view>
  </view>
  <view>
    <view hover-class="bg" bindtap="numBtn" data-val="4">4</view>
    <view hover-class="bg" bindtap="numBtn" data-val="5">5</view>
    <view hover-class="bg" bindtap="numBtn" data-val="6">6</view>
    <view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
  </view>
  <view>
    <view hover-class="bg" bindtap="numBtn" data-val="1">1</view>
    <view hover-class="bg" bindtap="numBtn" data-val="2">2</view>
    <view hover-class="bg" bindtap="numBtn" data-val="3">3</view>
    <view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
  </view>
  <view>
    <view hover-class="bg" bindtap="numBtn" data-val="0">0</view>
    <view hover-class="bg" bindtap="doBtn" data-val=".">.</view>
    <view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
  
  </view>
</view>

4、index.css樣式頁面

page{
  display: flex;
  flex-direction: column;/*項(xiàng)目主軸的排列方向 */
  height: 100%;
}
.result{
  flex: 1;/*均勻分配元素*/
  background: #f3f6fe;
  position: relative;
}
.result-num{
  position: absolute;/*父相子絕*/
  font-size: 20pt;
  bottom: 5vh;
  right: 3vw;
}
 
.result-op{
  position: absolute;
  font-size: 15pt;
  bottom: 1vh;
  right: 3vw;
}
.btns{
  flex: 1;
  display: flex;
  flex-direction: column;/*里面的大view排列為垂直*/
  font-size: 17pt;
  border-top: 1rpx solid #ccc;
  border-left: 1rpx solid #ccc;
}
.btns>view{
  flex: 1;
  display: flex;
}
.btns>view>view{
  flex-basis: 25%;/*寬度占比*/
  border-bottom: 1rpx solid #ccc;
  border-right: 1rpx solid #ccc;
  box-sizing: border-box;/*加上邊框的占比*/
  display:flex;
  align-items: center;
  justify-content: center;/*兩句加在一起是讓文字居中*/
}
.btns>view:last-child>view:first-child{
  flex-basis: 50%;
}
.btns>view:first-child>view:first-child{
  color:#f00;
}
.btns>view>view:last-child{
  color: #fcBe00;
}
.bg{
  background: #eee;
}

5、運(yùn)行結(jié)果

3、功能實(shí)現(xiàn)部分

1、刪除功能

其中substr()函數(shù)中兩個(gè)參數(shù)，第一個(gè)表示截取開始的位置，第二個(gè)表示截取的長度

delBtn:function(e){
    var num=this.data.num.substr(0,this.data.num.length-1);
    this.setData({num:num===""? "0":num})
  }

2、清空功能

 reSetBtn:function(e){
    //全部變成初始狀態(tài)
    this.result=null;
    this.isClear=false;
    this.setData({num:"0",op:""})
  }

3、其他功能實(shí)現(xiàn)

data:{
  //  data中只放置初始數(shù)據(jù)
  num:"1",
  op:" "//記錄運(yùn)算符號(hào)
 },
  result:null,
  isClear:false,//用來記錄狀態(tài)
  numBtn:function(e){
    var num =e.target.dataset.val//獲取data-val中的值
    //如果多次按0或者isClear為true，則將原來的數(shù)據(jù)清除，顯示按的數(shù)字
    if(this.data.num==='0'||this.isClear){
      this.setData({num:num})//將獲取的值給result
      this.isClear=false
    }else{
        this.setData({num:this.data.num+num})
    }
  },
 
  opBtn:function(e){
    var op=this.data.op;//先記錄當(dāng)前的op
    var num=Number(this.data.num);//獲取當(dāng)前的num數(shù)據(jù)
    this.setData({op:e.target.dataset.val});//把按下的按鈕給變量op
    if(this.isClear){//因?yàn)樯厦娌僮髦杏腥绻戳诉\(yùn)算符，則isclear為true，在這里為了避免多次按加都會(huì)起作用，再return
      return
    }
    this.isClear=true;//當(dāng)用戶按了運(yùn)算按鈕，再按數(shù)字，則把原來的數(shù)字清空
    if(this.result===null){
      this.result=num;
      return
    }
    if(op==="+"){
      this.result=this.result+num
      this.setData({num:this.result})//把加出來的結(jié)果為num
    }else if(op==="-"){
      this.result=this.result-num
    }else if(op==="*"){
      this.result=this.result*num
    }else if(op==="/"){
      this.result=this.result/num
    }else if(op==="%"){
      this.result=this.result%num
    }
    this.setData({num:this.result+""})//轉(zhuǎn)為字符串類型
 
  },
  doBtn:function(e){
    if(this.isClear){//表示上一個(gè)運(yùn)算結(jié)束了，一開始就按.的話
      this.setData({num:"0."});
      this.isClear=false;
      return
    }
    //如果多按了.
    if(this.data.num.indexOf(".")>=0){
      return
    }
    //正常數(shù)字后面按點(diǎn)
    this.setData({num:this.data.num+"."})
  },

感謝各位的閱讀！關(guān)于“javascript如何實(shí)現(xiàn)計(jì)算器功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！