Vue.js實現的計算器功能完整示例

2019-11-19 13:30:44

字體：大中小

來源：轉載

供稿：網友

本文實例講述了Vue.js實現的計算器功能。分享給大家供大家參考，具體如下：

1. HTML部分代碼

<!DOCTYPE html><html lang="en"><head>  <link rel="stylesheet" type="text/css" href="css/css.css" rel="external nofollow" >  <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>  <meta charset="UTF-8">  <title>my-calculator</title></head><body><div id="calculator">  <!--顯示框-->  <input-box v-bind:input-show="inputShow">  </input-box>  <btn-list>    <div @click="clearValue()" class=" btn-30 btn-radius color-red clear-marginleft">C</div>    <div class=" btn-30 btn-radius color-blue">+/-</div>    <div @click="inputValue('%')" class=" btn-30 btn-radius color-blue">%</div>    <div @click="backValue()" class=" btn-70 btn-radius color-red font-14">←</div>    <div @click="inputValue('7')" class=" btn-30 btn-radius clear-marginleft">7</div>    <div @click="inputValue('8')" class=" btn-30 btn-radius">8</div>    <div @click="inputValue('9')" class=" btn-30 btn-radius">9</div>    <div @click="squareValue()" class=" btn-30 btn-radius color-blue font-14">×²</div>    <div @click="radicalValue()" class=" btn-30 btn-radius color-blue font-12">√</div>    <div @click="inputValue('4')" class=" btn-30 btn-radius clear-marginleft">4</div>    <div @click="inputValue('5')" class=" btn-30 btn-radius">5</div>    <div @click="inputValue('6')" class=" btn-30 btn-radius">6</div>    <div @click="inputValue('×')" class=" btn-30 btn-radius color-blue font-14">×</div>    <div @click="inputValue('÷')" class=" btn-30 btn-radius color-blue font-12">÷</div>    <div @click="inputValue('1')" class=" btn-30 btn-radius clear-marginleft">1</div>    <div @click="inputValue('2')" class=" btn-30 btn-radius">2</div>    <div @click="inputValue('3')" class=" btn-30 btn-radius">3</div>    <div @click="inputValue('+')" class=" btn-30 btn-radius color-blue font-14">+</div>    <div @click="inputValue('-')" class=" btn-30 btn-radius color-blue font-14">-</div>    <div @click="inputValue('0')" class=" btn-70 btn-radius clear-marginleft">0</div>    <div @click="inputValue('.')" class=" btn-30 btn-radius">.</div>    <div @click="calValue()" class=" btn-70 btn-radius color-red font-14">=</div>  </btn-list></div><script>var calculator = new Vue({  el:'#calculator',  data:{    inputShow:{      value:'0'    }  },  components:{    'input-box':{      props:['inputShow'],      computed: {        value:function () {          return this.inputShow.value        }      },      template:'<input id="input-box" type="text" size="21" maxlength="21" v-model="value" readonly="readonly">'    },    'btn-list':{      template:'<div id="btn-list"><slot></slot></div>'    }  },  methods:{    inputValue(param){      if(Object.prototype.toString.call(this.inputShow.value) == "[object Number]"){   //判斷輸入框內容是否為數字類型        this.inputShow.value = "0";   //數字類型說明是上個計算結果,清空內容      }      var str ='' + this.inputShow.value; //輸入內容時,將輸入框內容轉為字符串類型      var len = str.length;      var arr = ["+","-","×","÷"];      var num = (''+parseFloat(str.split('').reverse().join(''))).split('').reverse().join('');   //parseInt(str.split('').reverse().join('')))是獲取輸入框內最后一串數字,再反轉回來 ,num為輸入框內最后一串數字      var nlen = num.length;      if((num!= '0' && param != '.')|| (param == '.'&& num.indexOf(".")==-1)){   //輸入框內最后一串數字不為0時拼接字符串        if(arr.indexOf(str.charAt(len-1)) != -1 && arr.indexOf(param) != -1){    //若一開始輸入內容為運算符,輸入無效          return;        }        this.inputShow.value += param;   //拼接輸入內容      }else{        arr.push("%");        if(param == '.'){      //若num中已有小數點,輸入內容為小數點,視為無效          return;        }else if(!(arr.indexOf(param) != -1)){    //判斷輸入框內最后一個字符不為運算符          this.inputShow.value =str.substring(0,str.length-nlen) + param;  //輸入框內最后一串數字為0時,刪除0拼接        }      }    },    clearValue(){      //清空輸入框內容      this.inputShow.value = '0';    },    calValue(){       //計算結果      var str = this.inputShow.value;      str = str.replace('×','*').replace('÷','/').replace('%','*0.01');    //替換運算符      try{        this.inputShow.value = eval(str);      //若用戶輸入內容不符合運算規則,不計算      }catch(error){        return;      }    },    squareValue(){             //平方計算      var str = this.inputShow.value;      this.inputShow.value = Math.pow(eval(str),2)    },    radicalValue(){             //開根號計算      var str = this.inputShow.value;      this.inputShow.value = Math.sqrt(eval(str));    },    backValue(){              //刪除鍵,刪除單個字符      var str = this.inputShow.value;      if(str.length == 1){        this.inputShow.value = "0";      }else{         this.inputShow.value = str.slice(0,str.length-1);      }    },    /*oppositeValue(){            //正負號取值      var str = this.inputShow.value;      var num = (''+parseInt(str.split('').reverse().join(''))).split('').reverse().join('');   //獲取輸入框內最后遺傳數字      var nlen = num.length;      debugger;      if(!isNaN( parseInt(str.charAt(str.length-1))) && num != 0){  //當輸入框末位字符為數字且最后一串數字不為0時,取正負        this.inputShow.value = str.substring(0,str.length-nlen)+`(-${num})`;      }    }*/  }})</script></body></html>

2. CSS部分代碼

@charset "utf-8";body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input{margin:0;padding:0;-webkit-text-size-adjust:none}h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}body>div{margin:0 auto}div{text-align:left}a img{border:0}body{color:#333;text-align:center;font:12px "微軟雅黑";}ul, ol, li{list-style-type:none;vertical-align:0}a{outline-style:none;color:#535353;text-decoration:none}a:hover{color:#D40000;text-decoration:none}.clear{height:0;overflow:hidden;clear:both}/* calculator */#calculator{width:200px;height:245px;padding:10px;border:1px solid #e5e5e5;background:#f8f8f8;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;box-shadow:0px 0px 10px #f2f2f2;-moz-box-shadow:0px 0px 10px #f2f2f2;-webkit-box-shadow:0px 0px 10px #f2f2f2;margin:40px auto 0 auto;}#calculator #input-box{margin:0;width:187px;padding:9px 5px;height:14px;border:1px solid #e5e5e5;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;background:#FFF;text-align:right;line-height:14px;font-size:12px;font-family:Verdana, Geneva, sans-serif;color:#666;outline:none; text-transform:uppercase;}#calculator #btn-list{width:200px;overflow:hidden;}#calculator #btn-list .btn-radius{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;border:1px solid #e5e5e5;background:-webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#ebebeb));background:-moz-linear-gradient(top, #f7f7f7,#ebebeb);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f7f7f7,endColorstr=#ebebeb,grandientType=1);line-height:29px;text-align:center;text-shadow:0px 1px 1px #FFF;font-weight:bold;font-family:Verdana, Geneva, sans-serif;color:#666;float:left;margin-left:11px;margin-top:11px;font-size:12px;cursor:pointer;}#calculator #btn-list .btn-radius:active{background:#ffffff;}#calculator #btn-list .clear-marginleft{margin-left:0;}#calculator #btn-list .font-14{font-size:14px;}#calculator #btn-list .color-red{color:#ff5050}#calculator #btn-list .color-blue{color:#00b4ff}#calculator #btn-list .btn-30{width:29px;height:29px;}#calculator #btn-list .btn-70{width:70px;height:29px;}

3. 使用本站HTML/CSS/JS在線運行測試工具：http://tools.VeVB.COm/code/HtmlJsRun，可得到如下測試運行效果：