使用HTML5、CSS3和JavaScript编写一个基本的计算器,能够执行加、减、乘、除计算,并能够通过鼠标点击按键输入指令,不能使用eval()函数
时间: 2024-03-25 15:36:48 浏览: 14
好的,下面是一个使用HTML、CSS和JavaScript编写的计算器,支持加、减、乘、除计算,并且不使用`eval()`函数:
```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");
var currentNumber = "";
var currentOperator = "";
var firstNumber = "";
var secondNumber = "";
var resultNumber = "";
function append(value) {
currentNumber += value;
result.innerHTML = currentNumber;
}
function clearResult() {
currentNumber = "";
currentOperator = "";
firstNumber = "";
secondNumber = "";
resultNumber = "";
result.innerHTML = "";
}
function calculate() {
if (currentNumber == "") {
return;
}
if (currentOperator == "") {
return;
}
if (firstNumber == "") {
firstNumber = currentNumber;
currentNumber = "";
result.innerHTML = "";
return;
}
if (secondNumber == "") {
secondNumber = currentNumber;
currentNumber = "";
}
if (currentNumber != "") {
secondNumber = currentNumber;
currentNumber = "";
}
if (currentOperator == "+") {
resultNumber = parseFloat(firstNumber) + parseFloat(secondNumber);
} else if (currentOperator == "-") {
resultNumber = parseFloat(firstNumber) - parseFloat(secondNumber);
} else if (currentOperator == "*") {
resultNumber = parseFloat(firstNumber) * parseFloat(secondNumber);
} else if (currentOperator == "/") {
resultNumber = parseFloat(firstNumber) / parseFloat(secondNumber);
}
result.innerHTML = resultNumber;
firstNumber = resultNumber;
secondNumber = "";
currentOperator = "";
}
function setOperator(operator) {
if (currentNumber == "") {
return;
}
if (firstNumber != "" && secondNumber != "") {
calculate();
}
currentOperator = operator;
result.innerHTML = operator;
}
</script>
</body>
</html>
```
在这个计算器中,我们使用了HTML和CSS来创建用户界面,使用JavaScript来实现计算器的逻辑。计算器中使用了一个`div`元素来显示计算结果,以及多个带有不同数字和操作符的按钮。用户可以通过点击这些按钮来输入计算指令,计算器会在结果区域显示计算结果。在JavaScript中,我们使用了一些变量来存储当前的数字、操作符和计算结果。当用户点击操作符按钮时,我们会将当前的数字存储为第一个数字,并将操作符存储起来。当用户继续输入数字时,我们会将其存储为第二个数字,并执行相应的计算。最后,我们会将计算结果显示在结果区域,并将第一个数字设置为计算结果,以便继续进行后续的计算。