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

<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.jb51.net/code/HtmlJsRun，可得到如下測試運行效果：

4. 使用時記得改下css路徑,在html中引入vue

5. 博主技術有限,正負號部分功能還有問題待完善.計算器還有一些未知的小Bug,感興趣的讀者可以在這個基礎上進行擴展。

原文地址：https://www.jb51.net/article/143623.htm

PS：這里再為大家推薦幾款計算工具供大家參考：

在線數學表達式簡單轉換/計算工具：
http://tools.jb51.net/jisuanqi/exp_jisuanqi

在線一元函數（方程）求解計算工具：
http://tools.jb51.net/jisuanqi/equ_jisuanqi

科學計算器在線使用_高級計算器在線計算：
http://tools.jb51.net/jisuanqi/jsqkexue

在線計算器_標准計算器：
http://tools.jb51.net/jisuanqi/jsq

希望本文所述對大家vue.js程序設計有所幫助。

您可能感興趣的文章:

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

免責聲明！