使用HTML写一个计算器
时间: 2023-07-20 08:04:07 浏览: 42
好的,以下是一个简单的 HTML 计算器示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
background-color: #eee;
border-radius: 5px;
}
.display {
display: flex;
justify-content: flex-end;
align-items: center;
margin: 5px;
padding: 10px;
width: 220px;
height: 50px;
font-size: 24px;
background-color: #ddd;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="display" id="display"></div>
<div class="button" onclick="clearDisplay()">C</div>
<div class="button" onclick="addToDisplay('(')">(</div>
<div class="button" onclick="addToDisplay(')')">)</div>
<div class="button" onclick="addToDisplay('/')">/</div>
<div class="button" onclick="addToDisplay('7')">7</div>
<div class="button" onclick="addToDisplay('8')">8</div>
<div class="button" onclick="addToDisplay('9')">9</div>
<div class="button" onclick="addToDisplay('*')">*</div>
<div class="button" onclick="addToDisplay('4')">4</div>
<div class="button" onclick="addToDisplay('5')">5</div>
<div class="button" onclick="addToDisplay('6')">6</div>
<div class="button" onclick="addToDisplay('-')">-</div>
<div class="button" onclick="addToDisplay('1')">1</div>
<div class="button" onclick="addToDisplay('2')">2</div>
<div class="button" onclick="addToDisplay('3')">3</div>
<div class="button" onclick="addToDisplay('+')">+</div>
<div class="button" onclick="addToDisplay('0')">0</div>
<div class="button" onclick="addToDisplay('.')">.</div>
<div class="button" onclick="calculate()">=</div>
</div>
<script>
function addToDisplay(value) {
document.getElementById("display").innerHTML += value;
}
function clearDisplay() {
document.getElementById("display").innerHTML = "";
}
function calculate() {
var expression = document.getElementById("display").innerHTML;
var result = eval(expression);
document.getElementById("display").innerHTML = result;
}
</script>
</body>
</html>
```
这个计算器使用一些简单的 HTML 元素和 CSS 样式来创建一个漂亮的界面。它包括一个显示区域和一些按钮,每个按钮都有一个单击事件,可以将其值添加到显示区域中。还有一个清除按钮和一个等于按钮,分别用于清除显示区域和计算表达式。在计算表达式时,我们使用 JavaScript 的 eval() 函数来计算表达式的值,并将结果显示在显示区域中。