<!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>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
--EOF--
发表于 2024-04-08 ，并被添加「 使用vue制作一个计算器 」标签 。
Comments
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。