用前端语言1.制作一个简易计算器,包含加减乘除四则运算 2.能够得到正确的运算结果 3.没有数字的按键
时间: 2023-06-26 17:10:33 浏览: 74
这里提供一个基于HTML、CSS和JavaScript的简易计算器实现:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>简易计算器</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<div class="screen">
<input type="text" id="result" disabled>
</div>
<div class="buttons">
<button onclick="clearScreen()">C</button>
<button onclick="deleteChar()">←</button>
<button onclick="addChar('(')">(</button>
<button onclick="addChar(')')">)</button>
<button onclick="addChar('/')">÷</button>
<button onclick="addChar('7')">7</button>
<button onclick="addChar('8')">8</button>
<button onclick="addChar('9')">9</button>
<button onclick="addChar('*')">×</button>
<button onclick="addChar('4')">4</button>
<button onclick="addChar('5')">5</button>
<button onclick="addChar('6')">6</button>
<button onclick="addChar('-')">-</button>
<button onclick="addChar('1')">1</button>
<button onclick="addChar('2')">2</button>
<button onclick="addChar('3')">3</button>
<button onclick="addChar('+')">+</button>
<button onclick="addChar('0')">0</button>
<button onclick="addChar('.')">.</button>
<button onclick="calculate()">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
.calculator {
margin: auto;
width: 240px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f7f7f7;
}
.screen {
margin-bottom: 10px;
}
input[type="text"] {
width: 100%;
font-size: 24px;
padding: 5px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
text-align: right;
}
.buttons button {
width: 50px;
height: 50px;
font-size: 24px;
margin: 2px;
border: none;
border-radius: 5px;
background-color: #e0e0e0;
}
.buttons button:hover {
background-color: #ccc;
}
.buttons button:active {
background-color: #aaa;
}
```
JavaScript代码:
```
var result = document.getElementById("result");
function addChar(char) {
result.value += char;
}
function clearScreen() {
result.value = "";
}
function deleteChar() {
result.value = result.value.slice(0, -1);
}
function calculate() {
try {
result.value = eval(result.value);
} catch (error) {
alert("输入有误");
}
}
```
这个计算器实现了加减乘除四则运算,以及括号和小数点的输入和删除功能。在用户点击“=”按钮时,会调用calculate()函数进行运算,并将结果显示在文本框中。如果用户输入的表达式有误,会弹出提示窗口。