console
new Vue({
el: '#app',
data: {
equation: '0', // 显示在计算器上的表达式
isDecimalAdded: false, // 避免重复输入小数点
isOperatorAdded: false, // 避免重复输入运算符 + - * /
isStarted: false // 是否开始输入数字
},
methods: {
// check if the character is + - * /
isOperator(character) {
return ['+', '-', '*', '/'].indexOf(character) >= 0
},
isNumber(character) {
//return ['1', '2', '3', '4', '5', '7', '8', '8', '9', '0'].indexOf(character) >= 0
return (character >= '0' && character <= '9')
},
// 输入运算符
enter_operator (character) {
this.isDecimalAdded = false
this.isStarted = false
if (this.isOperatorAdded) { // 已经存在操作符了 则替换以前的操作符
this.equation = substr(this.equation, 0, this.equation.length - 1) + character
} else { // 没有操作符, 则加上操作符好了
this.equation += character
this.isOperatorAdded = true
}
},
// when pressed operators or numbers
append (character) {
if (this.isStarted) { // 已经输入了数字
if (this.isNumber(character)) { // 输入的是数字
this.equation += character
} else if (character === '.') { // 输入的是小数点儿
if (this.isDecimalAdded) { // 已经有小数点儿了
reutrn;
} else {
this.equation += character
this.isDecimalAdded = true
}
} else if (this.isOperator(character)) { // 是操作符
this.enter_operator(character)
}
} else { // 没有输入数字, 则开始输入数字
if (character === 0) { // 如果输入的是0, 则什么也不做
if (this.equation.substr(this.equation.length -1) === '0') { // 如果最后一个字符是0
if (this.isDecimalAdded) {
this.equation += '' + character
}
return
} else {
this.equation += '' + character
}
} else if (character === '.') { // 如果输入是的小数点
if (this.isDecimalAdded) { // 如果小数点已经输入过了
return
} else {
this.equation += character
this.isDecimalAdded = true
}
} else if (this.isNumber(character)) { // 是数字
if (this.isDecimalAdded) {
this.equation += '' + character
} else {
if (this.equation.substr(this.equation.length - 1) === '0') { // 如果最后一个字符是0, 则把0 替换掉
this.equation = this.equation.substr(0, this.equation.length - 1) + character
} else {
this.equation += character
}
}
this.isStarted = true
this.isOperatorAdded = false
} else if (this.isOperator(character)) {
this.enter_operator(character)
}
}
return
},
// when pressed =
calculate() {
this.isDecimalAdded = false
this.isStarted = false
this.isOperatorAdded = false
this.equation = eval(this.equation)
},
// when pressed + -
calculateToggle() {
this.equation = eval(this.equation) * -1
},
// when pressed %
calculatePercentage() {
this.equation = eval(this.equation) / 100
},
// when pressed AC
clear() {
this.equation = '0'
this.isDecimalAdded = false
this.isOperatorAdded = false
this.isStarted = false
}
}
});
<div id="app">
<div class="calculator">
<div class="result" style="grid-area: result">
{{equation}}
</div>
<button style="grid-area: ac" @click="clear">AC</button>
<button style="grid-area: plus-minus" @click="calculateToggle">±</button>
<button style="grid-area: percent" @click="calculatePercentage">%</button>
<button style="grid-area: add" @click="append('+')">+</button>
<button style="grid-area: subtract" @click="append('-')">-</button>
<button style="grid-area: multiply" @click="append('*')">*</button>
<button style="grid-area: divide" @click="append('/')">/</button>
<button style="grid-area: equal" @click="calculate">=</button>
<button style="grid-area: number-1" @click="append(1)">1</button>
<button style="grid-area: number-2" @click="append(2)">2</button>
<button style="grid-area: number-3" @click="append(3)">3</button>
<button style="grid-area: number-4" @click="append(4)">4</button>
<button style="grid-area: number-5" @click="append(5)">5</button>
<button style="grid-area: number-6" @click="append(6)">6</button>
<button style="grid-area: number-7" @click="append(7)">7</button>
<button style="grid-area: number-8" @click="append(8)">8</button>
<button style="grid-area: number-9" @click="append(9)">9</button>
<button style="grid-area: number-0" @click="append(0)">0</button>
<button style="grid-area: dot" @click="append('.')">.</button>
</div>
</div>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #eee;
}
.calculator {
--button-width: 70px;
--button-height: 70px;
display: grid;
grid-template-areas:
"result result result result"
"ac plus-minus percent divide"
"number-7 number-8 number-9 multiply"
"number-4 number-5 number-6 subtract"
"number-1 number-2 number-3 add"
"number-0 number-0 dot equal";
grid-template-columns: repeat(4, var(--button-width));
grid-template-rows: repeat(6, var(--button-height));
box-shadow: -8px -8px 16px -10px rgba(255, 255, 255, 1)
, 8px 8px 16px -10px rgba(0, 0, 0, 1)
;
padding: 24px;
border-radius: 20px;
}
.calculator button {
margin: 8px;
padding: 0;
border: 0;
display: block;
outline: none;
border-radius: calc(var(--button-height) / 2);
font-size: 24px;
font-family: monospace;
font-weight: normal;
color: #888;
background: linear-gradient( 135deg
, rgba(230, 230, 230, 1) 0%
, rgba(246, 246, 246, 1) 100%
)
;
box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1)
, 4px 4px 10px -8px rgba(0, 0, 0, .3)
;
}
.calculator button:active {
box-shadow: -4px -4px 10px -8px rgba(255, 255, 255, 1) inset
, 4px 4px 10px -8px rgba(0, 0, 0, .3) inset
;
}
.result {
text-align: right;
line-height: var(--button-height);
font-size: 48px;
font-family: 'Times New Roman', Times, serif;
padding: 0 20px;
color: #888;
}