制作一个js简易计算器
时间: 2024-05-08 10:17:07 浏览: 120
js制作简单计算器
以下是一个简单的基于HTML和JavaScript的计算器实现:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Calculator</title>
<style>
table {
border-collapse: collapse;
margin: auto;
}
td {
padding: 10px;
border: 1px solid black;
}
input[type=text] {
width: 100%;
height: 50px;
font-size: 24px;
text-align: right;
padding-right: 10px;
box-sizing: border-box;
}
input[type=button] {
width: 100%;
height: 50px;
font-size: 24px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
input[type=button]:hover {
background-color: #3E8E41;
}
input[type=button]:active {
background-color: #297F29;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="4"><input type="text" id="result" disabled></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="addToResult('7')"></td>
<td><input type="button" value="8" onclick="addToResult('8')"></td>
<td><input type="button" value="9" onclick="addToResult('9')"></td>
<td><input type="button" value="/" onclick="addToResult('/')"></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="addToResult('4')"></td>
<td><input type="button" value="5" onclick="addToResult('5')"></td>
<td><input type="button" value="6" onclick="addToResult('6')"></td>
<td><input type="button" value="*" onclick="addToResult('*')"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="addToResult('1')"></td>
<td><input type="button" value="2" onclick="addToResult('2')"></td>
<td><input type="button" value="3" onclick="addToResult('3')"></td>
<td><input type="button" value="-" onclick="addToResult('-')"></td>
</tr>
<tr>
<td><input type="button" value="0" onclick="addToResult('0')"></td>
<td><input type="button" value="." onclick="addToResult('.')"></td>
<td><input type="button" value="C" onclick="clearResult()"></td>
<td><input type="button" value="+" onclick="addToResult('+')"></td>
</tr>
<tr>
<td colspan="4"><input type="button" value="=" onclick="calculateResult()"></td>
</tr>
</table>
<script src="calculator.js"></script>
</body>
</html>
```
JavaScript代码:
```
let result = document.getElementById('result');
function addToResult(value) {
result.value += value;
}
function clearResult() {
result.value = '';
}
function calculateResult() {
result.value = eval(result.value);
}
```
这个简单的计算器具有加、减、乘、除和取反功能,也可以清除结果,计算结果并将其显示在输入框中。请注意,`eval()`函数被用于计算结果,但是这个函数不安全,因为它可以执行任意JavaScript代码。因此,这个计算器只适合用于演示和学习目的。
阅读全文