html计算器代码示例,注意添加“重置”功能和小数点按键
时间: 2024-05-04 13:17:00 浏览: 8
以下是一个简单的 HTML 计算器代码示例,包括重置按钮和小数点按键:
```html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>计算器</h1>
<input type="text" id="result" readonly><br><br>
<button onclick="reset()">重置</button><br><br>
<button onclick="addChar('7')">7</button>
<button onclick="addChar('8')">8</button>
<button onclick="addChar('9')">9</button>
<button onclick="addChar('+')">+</button><br>
<button onclick="addChar('4')">4</button>
<button onclick="addChar('5')">5</button>
<button onclick="addChar('6')">6</button>
<button onclick="addChar('-')">-</button><br>
<button onclick="addChar('1')">1</button>
<button onclick="addChar('2')">2</button>
<button onclick="addChar('3')">3</button>
<button onclick="addChar('*')">*</button><br>
<button onclick="addChar('0')">0</button>
<button onclick="addChar('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="addChar('/')">/</button><br>
<script>
var result = document.getElementById('result');
var currentNumber = '';
var currentOperator = '';
var calculated = false;
function addChar(char) {
if (char === '.') {
if (currentNumber.indexOf('.') !== -1) {
return;
}
}
if (calculated) {
reset();
}
currentNumber += char;
result.value = currentNumber;
}
function calculate() {
if (currentOperator === '') {
return;
}
var resultValue = eval(currentNumber + currentOperator + result.value);
result.value = resultValue;
currentNumber = resultValue.toString();
currentOperator = '';
calculated = true;
}
function reset() {
currentNumber = '';
currentOperator = '';
result.value = '';
calculated = false;
}
</script>
</body>
</html>
```
这个计算器使用一个文本输入框来显示结果。`addChar()` 函数用于在输入框中添加数字和运算符。如果用户按下小数点键,函数会检查输入框中是否已经有小数点,如果有,则不添加。`calculate()` 函数用于执行计算。如果用户按下“重置”按钮,`reset()` 函数会清除输入框和当前操作数和运算符的值。