HTML和js实现计算器
时间: 2024-05-15 11:18:44 浏览: 15
好的,以下是一个使用 HTML 和 JavaScript 实现的简单计算器:
```html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #eee;
}
#calculator {
width: 300px;
margin: 50px auto;
background-color: #fff;
border-radius: 5px;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#result {
font-size: 24px;
text-align: right;
margin-bottom: 10px;
}
button {
width: 50px;
height: 50px;
font-size: 20px;
border-radius: 5px;
margin: 5px;
background-color: #eee;
border: none;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
button:hover {
background-color: #ddd;
}
button:active {
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}
button.operator {
background-color: #f80;
color: #fff;
}
button.operator:hover {
background-color: #e70;
}
button.operator:active {
box-shadow: inset 0 0 5px rgba(255,255,255,0.2);
}
</style>
</head>
<body>
<div id="calculator">
<div id="result">0</div>
<button onclick="clearResult()">C</button>
<button onclick="appendChar('/')">÷</button>
<button onclick="appendChar('*')">x</button>
<button onclick="appendChar('-')">-</button>
<button onclick="appendChar('7')">7</button>
<button onclick="appendChar('8')">8</button>
<button onclick="appendChar('9')">9</button>
<button onclick="appendChar('+')">+</button>
<button onclick="appendChar('4')">4</button>
<button onclick="appendChar('5')">5</button>
<button onclick="appendChar('6')">6</button>
<button onclick="evaluate()">=</button>
<button onclick="appendChar('1')">1</button>
<button onclick="appendChar('2')">2</button>
<button onclick="appendChar('3')">3</button>
<button id="zero" onclick="appendChar('0')">0</button>
<button onclick="appendChar('.')">.</button>
</div>
<script type="text/javascript">
var result = document.getElementById("result");
function appendChar(char) {
result.innerHTML += char;
}
function clearResult() {
result.innerHTML = "";
}
function evaluate() {
result.innerHTML = eval(result.innerHTML);
}
</script>
</body>
</html>
```
这是一个简单的 HTML 页面,其中包含一个 `div` 元素,用于放置计算器的各个按钮,并通过 JavaScript 来实现计算器的功能。计算器的核心代码如下:
```javascript
var result = document.getElementById("result");
function appendChar(char) {
result.innerHTML += char;
}
function clearResult() {
result.innerHTML = "";
}
function evaluate() {
result.innerHTML = eval(result.innerHTML);
}
```
其中,`result` 是用于显示计算结果的 `div` 元素,`appendChar()` 函数用于向结果中添加数字或运算符,`clearResult()` 函数用于清除结果,`evaluate()` 函数用于计算结果。在 HTML 中,我们给每个按钮都绑定了一个点击事件,例如:
```html
<button onclick="appendChar('7')">7</button>
```
这表示当用户点击 `7` 按钮时,会调用 `appendChar('7')` 函数,将 `7` 添加到结果中。类似地,其他按钮也都绑定了相应的点击事件。
需要注意的是,由于 JavaScript 中的 `eval()` 函数存在一些安全漏洞,所以在实际开发中不建议直接使用。如果需要实现更为复杂的计算器功能,可以考虑使用其他的计算库或者自己编写计算逻辑。