<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>语音计算器（含历史）</title>
<style>
body {
font-family: sans-serif;
background-color: #f0f0f0;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.calculator {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 320px;
}
.display {
width: 100%;
height: 50px;
font-size: 24px;
text-align: right;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 8px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 15px;
}
button {
padding: 15px;
font-size: 18px;
border: none;
border-radius: 8px;
cursor: pointer;
background-color: #e0e0e0;
}
button.operator {
background-color: #f39c12;
color: white;
}
button.equal {
background-color: #27ae60;
color: white;
grid-column: span 2;
}
button.clear {
background-color: #c0392b;
color: white;
grid-column: span 4;
}
.history {
max-height: 150px;
overflow-y: auto;
border-top: 1px solid #ccc;
padding-top: 10px;
font-size: 14px;
}
.history-item {
cursor: pointer;
padding: 5px;
border-radius: 4px;
}
.history-item:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" class="display" disabled placeholder="0">
<div class="buttons">
<button onclick="append('7')">7</button>
<button onclick="append('8')">8</button>
<button onclick="append('9')">9</button>
<button class="operator" onclick="appendOperator('/')">÷</button>
<button onclick="append('4')">4</button>
<button onclick="append('5')">5</button>
<button onclick="append('6')">6</button>
<button class="operator" onclick="appendOperator('*')">×</button>
<button onclick="append('1')">1</button>
<button onclick="append('2')">2</button>
<button onclick="append('3')">3</button>
<button class="operator" onclick="appendOperator('-')">−</button>
<button onclick="append('0')">0</button>
<button onclick="append('.')">.</button>
<button class="equal" onclick="calculate()">=</button>
<button class="operator" onclick="appendOperator('+')">+</button>
<button class="clear" onclick="clearDisplay()">清除</button>
</div>
<div class="history" id="history"></div>
</div>
<script>
const display = document.getElementById('display');
const history = document.getElementById('history');
function speak(text) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'zh-CN';
window.speechSynthesis.speak(utterance);
}
function append(value) {
display.value += value;
speak(value);
}
function appendOperator(op) {
display.value += op;
const map = { '+': '加号', '-': '减号', '*': '乘号', '/': '除号' };
speak(map[op] || op);
}
function clearDisplay() {
display.value = '';
speak('已清除');
}
function calculate() {
try {
const expression = display.value;
const result = eval(expression);
display.value = result;
speak('结果是 ' + result);
addToHistory(expression, result);
} catch {
display.value = '错误';
speak('计算错误');
}
}
function addToHistory(expression, result) {
const item = document.createElement('div');
item.className = 'history-item';
item.textContent = `${expression} = ${result}`;
item.onclick = () => {
display.value = expression;
speak('已选中历史记录');
};
history.prepend(item);
}
</script>
</body>
</html>