html+js实现计算器
时间: 2023-11-08 12:04:17 浏览: 267
html+js计算器
4星 · 用户满意度95%
好的,以下是一个简单的HTML和JavaScript实现计算器的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
</head>
<body>
<input type="text" id="input" disabled><br>
<button onclick="clearInput()">清空</button>
<button onclick="backspace()">退格</button><br>
<button onclick="appendToInput('7')">7</button>
<button onclick="appendToInput('8')">8</button>
<button onclick="appendToInput('9')">9</button>
<button onclick="appendToInput('/')">÷</button><br>
<button onclick="appendToInput('4')">4</button>
<button onclick="appendToInput('5')">5</button>
<button onclick="appendToInput('6')">6</button>
<button onclick="appendToInput('*')">×</button><br>
<button onclick="appendToInput('1')">1</button>
<button onclick="appendToInput('2')">2</button>
<button onclick="appendToInput('3')">3</button>
<button onclick="appendToInput('-')">-</button><br>
<button onclick="appendToInput('0')">0</button>
<button onclick="appendToInput('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendToInput('+')">+</button><br>
<script>
function appendToInput(val) {
document.getElementById('input').value += val;
}
function clearInput() {
document.getElementById('input').value = '';
}
function backspace() {
var input = document.getElementById('input').value;
document.getElementById('input').value = input.substring(0, input.length - 1);
}
function calculate() {
var input = document.getElementById('input').value;
var result = eval(input);
document.getElementById('input').value = result;
}
</script>
</body>
</html>
```
这个计算器的界面由一些按钮和一个输入框组成,按钮被点击时会调用对应的JavaScript函数。`appendToInput`函数用于将按钮的值添加到输入框中,`clearInput`函数用于清空输入框,`backspace`函数用于删除输入框中的最后一个字符,`calculate`函数用于计算输入框中的表达式并将结果显示在输入框中。注意,这个计算器的计算方法使用了JavaScript内置的`eval`函数,这个函数可以计算字符串表达式的值,但是需要注意安全问题。
阅读全文