使用HTML5、CSS3和JavaScript编写一个基本的计算器,能够执行加、减、乘、除计算,并能够通过鼠标点击按键输入指令
时间: 2023-11-21 17:30:14 浏览: 28
好的,下面是一个简单的使用HTML、CSS和JavaScript编写的计算器,支持加、减、乘、除计算:
```html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style>
.calculator {
width: 250px;
border: 1px solid #ccc;
padding: 10px;
margin: 0 auto;
}
#result {
height: 30px;
font-size: 20px;
border: 1px solid #ccc;
text-align: right;
padding: 5px;
margin-bottom: 10px;
}
.button {
display: inline-block;
width: 50px;
height: 50px;
font-size: 20px;
text-align: center;
border: 1px solid #ccc;
cursor: pointer;
margin: 5px;
}
.clear {
background-color: #f00;
color: #fff;
}
</style>
</head>
<body>
<div class="calculator">
<div id="result"></div>
<div>
<div class="button" onclick="append('7')">7</div>
<div class="button" onclick="append('8')">8</div>
<div class="button" onclick="append('9')">9</div>
<div class="button" onclick="append('/')">÷</div>
</div>
<div>
<div class="button" onclick="append('4')">4</div>
<div class="button" onclick="append('5')">5</div>
<div class="button" onclick="append('6')">6</div>
<div class="button" onclick="append('*')">×</div>
</div>
<div>
<div class="button" onclick="append('1')">1</div>
<div class="button" onclick="append('2')">2</div>
<div class="button" onclick="append('3')">3</div>
<div class="button" onclick="append('-')">-</div>
</div>
<div>
<div class="button" onclick="append('0')">0</div>
<div class="button" onclick="append('.')">.</div>
<div class="button clear" onclick="clearResult()">C</div>
<div class="button" onclick="append('+')">+</div>
</div>
<div>
<div class="button" style="width: 110px;" onclick="calculate()">=</div>
</div>
</div>
<script>
var result = document.getElementById("result");
function append(value) {
result.innerHTML += value;
}
function clearResult() {
result.innerHTML = "";
}
function calculate() {
result.innerHTML = eval(result.innerHTML);
}
</script>
</body>
</html>
```
在这个计算器中,我们使用了HTML和CSS来创建用户界面,使用JavaScript来实现计算器的逻辑。计算器中使用了一个`div`元素来显示计算结果,以及多个带有不同数字和操作符的按钮。用户可以通过点击这些按钮来输入计算指令,计算器会在结果区域显示计算结果。在JavaScript中,我们使用`eval()`函数来计算表达式的值。