使用HTML5、CSS3和JavaScript编写计算器 ,计算器具备基本的加、减、乘、除计算能力 ,能够通过鼠标点击按键执行指令输入,不能使用eval()函数,源代码
时间: 2023-07-10 10:37:01 浏览: 40
好的,下面是一个基于HTML5、CSS3和JavaScript的计算器示例代码,具备基本的加、减、乘、除计算能力,能够通过鼠标点击按键执行指令输入,但不能使用eval()函数:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="calculator">
<div class="display">
<input type="text" id="input" readonly>
</div>
<div class="buttons">
<button class="number" value="7">7</button>
<button class="number" value="8">8</button>
<button class="number" value="9">9</button>
<button class="operator" value="+">+</button>
<button class="number" value="4">4</button>
<button class="number" value="5">5</button>
<button class="number" value="6">6</button>
<button class="operator" value="-">-</button>
<button class="number" value="1">1</button>
<button class="number" value="2">2</button>
<button class="number" value="3">3</button>
<button class="operator" value="*">*</button>
<button class="number" value="0">0</button>
<button class="operator" value=".">.</button>
<button class="calculate" value="=">=</button>
<button class="operator" value="/">/</button>
<button class="clear" value="C">C</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```css
.calculator {
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
max-width: 300px;
}
.display {
margin-bottom: 10px;
}
.display input {
width: 100%;
border: none;
background: #f0f0f0;
padding: 10px;
font-size: 24px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
button {
width: 100%;
border: none;
background: #ccc;
padding: 10px;
font-size: 24px;
cursor: pointer;
}
.number {
background: #f0f0f0;
}
.operator {
background: #e0e0e0;
}
.calculate {
background: #f44336;
color: #fff;
}
```
JavaScript代码:
```javascript
var input = document.getElementById("input");
var clear = document.querySelector(".clear");
var calculate = document.querySelector(".calculate");
var operators = document.querySelectorAll(".operator");
var numbers = document.querySelectorAll(".number");
// 添加数字按钮点击事件
for (var i = 0; i < numbers.length; i++) {
numbers[i].addEventListener("click", function() {
input.value += this.value;
});
}
// 添加运算符按钮点击事件
for (var i = 0; i < operators.length; i++) {
operators[i].addEventListener("click", function() {
input.value += this.value;
});
}
// 添加清除按钮点击事件
clear.addEventListener("click", function() {
input.value = "";
});
// 添加计算按钮点击事件
calculate.addEventListener("click", function() {
var result = 0;
var expression = input.value;
// 使用正则表达式将字符串中的数字和运算符提取出来,存放到数组中
var tokens = expression.match(/(\d+|\+|\-|\*|\/)/g);
// 如果输入的表达式不合法,则提示错误信息
if (tokens === null || tokens.length < 3) {
alert("请输入有效的表达式");
return;
}
// 计算乘法和除法
for (var i = 0; i < tokens.length; i++) {
if (tokens[i] === "*") {
var a = parseFloat(tokens[i - 1]);
var b = parseFloat(tokens[i + 1]);
result = a * b;
tokens.splice(i - 1, 3, result);
i -= 2;
} else if (tokens[i] === "/") {
var a = parseFloat(tokens[i - 1]);
var b = parseFloat(tokens[i + 1]);
result = a / b;
tokens.splice(i - 1, 3, result);
i -= 2;
}
}
// 计算加法和减法
result = parseFloat(tokens[0]);
for (var i = 1; i < tokens.length; i += 2) {
var operator = tokens[i];
var operand = parseFloat(tokens[i + 1]);
if (operator === "+") {
result += operand;
} else if (operator === "-") {
result -= operand;
}
}
// 显示计算结果
input.value = result;
});
```
希望这个示例代码对您有所帮助。如果您有任何问题,请随时问我。