跟李炎恢老師的教程一步一步實現的一個mini計算器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>迷你計算器</title> <style> body{ margin: 20px; } #app{ border : 1px solid #ccc; border-radius: 4px; padding: 10px; width:175px; height: 305px; } #input-box{ text-align: right; width: 155px; height: 20px; border: 1px solid #ccc; border: radus 2%; padding: 10px; margin-bottom: 10px; background-color: white; color: #666; } #app .btn{ width:40px; height: 40px; border : 1px solid #ccc; border-radius: 2px; background-color: white; margin-bottom: 10px; cursor: pointer; color:#666; font-weight: bold; } #app .btn-double{ width: 84px; } #app .btn:hover{ background-color: #333; color:white; } </style> </head> <body> <div id="app"> <result-box :get-value="resultValue"></result-box> <calc-box> <button class="btn" @click="clear()">C</button> <button class="btn" @click="sign()">+/-</button> <button class="btn" @click="symbol('×')">×</button> <button class="btn" @click="symbol('÷')">÷</button> <button class="btn" @click="input('1')">1</button> <button class="btn" @click="input('2')">2</button> <button class="btn" @click="input('3')">3</button> <button class="btn" @click="symbol('-')">-</button> <button class="btn" @click="input('4')">4</button> <button class="btn" @click="input('5')">5</button> <button class="btn" @click="input('6')">6</button> <button class="btn" @click="symbol('+')">+</button> <button class="btn" @click="input('7')">7</button> <button class="btn" @click="input('8')">8</button> <button class="btn" @click="input('9')">9</button> <button class="btn" @click="symbol('%')">%</button> <button class="btn" @click="input('0')">0</button> <button class="btn" @click="point()">.</button> <button class="btn btn-double" @click="calculate()">=</button> </calc-box> </div> <script src="./js/vue.js"></script> <script> //去掉提示 Vue.config.productionTip = false //計算器結果框組件 const resultBox = { //父子通信 props : ['getValue'],// //計算屬性 computed:{ value(){ return this.getValue; } }, template : ` <input id = "input-box" type="text" v-model="value" readonly> ` } //計算器輸入面板組件 const calcBox = { template : ` <div id="calc-box"> <slot></slot> </div> ` } //Vue實例 const app = new Vue({ el : '#app', data : { resultValue : 0 }, //組件 components : { //計算器結果框組件 'result-box' : resultBox, 'calc-box' : calcBox }, //方法 methods: { //輸入數值 input(param){ //拒絕開始0和反覆0,並且防止0.這種被和諧掉 if(parseInt(this.resultValue) === 0 && !/0[\.|\s]/.test(this.resultValue)){ this.resultValue = param }else{ this.resultValue +=param } }, //加減乘除算術公式 symbol(param){ this.resultValue += ' ' + param + ' ' }, //處理小數點 point(param){ //轉換成字符串 const strValue = this.toStr() //得到最後一位數值 const lastNumber = strValue.substring(strValue.lastIndexOf(' ')) //判斷是否已存在小數點 if (strValue.indexOf('.') !== -1){ return } else { this.resultValue += '.' } }, //正負號設置 sign(){ //轉換字符串 const strValue = this.toStr() //得到最後一位數值 let lastNumber = strValue.substring(strValue.lastIndexOf(' ')) //得到之前的數值+符號 let prevNumber = strValue.substr(0,strValue.lastIndexOf(' ')) //判斷當前是否有正負號 if (lastNumber.indexOf('-') === -1){ lastNumber = ' -' + lastNumber.trim() } else { lastNumber = ' ' + lastNumber.trim().substr(1) } //合併 this.resultValue = prevNumber + lastNumber }, //計算結果 calculate(){ try{ //替換運算符符號 const strValue = this.resultValue.replace('×','*').replace('÷','/') //計算 this.resultValue = eval(strValue) }catch(e){ alert('無法正確計算！') } }, //轉換成字符串 toStr(){ return this.resultValue.toString() }, clear(){ this.resultValue = '0' } }, }) </script> </body> </html>