<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.calculator {
border: 2px solid #333;
border-radius: 10px;
width: 300px;
}
.display {
border-bottom: 2px solid #333;
display: flex;
}
.screen {
flex: 1;
height: 50px;
text-align: center;
line-height: 50px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
button {
padding: 10px;
font-size: 1.2em;
border: none;
background-color: #f0f0f0;
cursor: pointer;
}
button:hover {
background-color: #e0e0e0;
}
</style>
<body>
<div id="app">
<div class="calculator">
<div style="text-align: center;line-height: 30px;border-bottom: 2px solid black; width: 100%;height: 30px;">{{ result }}</div>
<div class="display">
<div class="screen">{{ firstNumber }}</div>
<div class="screen" style="border-left:2px solid black;">{{ operator }}</div>
<div class="screen" style="border-left:2px solid black;">{{ secondNumber }}</div>
</div>
<div class="buttons">
<button @click="addToExpression(1)">1</button>
<button @click="addToExpression(2)">2</button>
<button @click="addToExpression(3)">3</button>
<button @click="addToExpression('+')">+</button>
<button @click="addToExpression(4)">4</button>
<button @click="addToExpression(5)">5</button>
<button @click="addToExpression(6)">6</button>
<button @click="addToExpression('-')">-</button>
<button @click="addToExpression(7)">7</button>
<button @click="addToExpression(8)">8</button>
<button @click="addToExpression(9)">9</button>
<button @click="addToExpression('*')">×</button>
<button @click="clear">C</button>
<button @click="addToExpression(0)">0</button>
<button @click="calculate">=</button>
<button @click="addToExpression('/')">÷</button>
</div>
</div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
firstNumber: '',
secondNumber: '',
operator: '',
},
methods: {
addToExpression(value) {
if (value === '+' || value === '-' || value === '*' || value === '/') {
this.operator = value;
} else if (this.operator === '') {
this.firstNumber += value;
} else {
this.secondNumber += value;
}
},
clear() {
this.firstNumber = '';
this.secondNumber = '';
this.operator = '';
},
calculate() {
let result = 0;
const num1 = parseFloat(this.firstNumber);
const num2 = parseFloat(this.secondNumber);
switch (this.operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
}
this.result = result.toString();
this.firstNumber = '';
this.secondNumber = '';
this.operator = '';
},
},
});
</script>
</body>
</html>
效果图
