js 给我写一个在线计算器
时间: 2024-03-21 11:41:05 浏览: 11
好的,以下是一个简单的在线计算器的JavaScript代码示例:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线计算器</title>
<style>
body {
font-family: Arial, sans-serif;
}
#calculator {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
input[type=text] {
width: 100%;
margin-bottom: 10px;
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: 1px solid #ccc;
}
input[type=button] {
width: 50%;
margin: 5px;
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
}
input[type=button]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="result" readonly>
<input type="button" value="1" onclick="addToResult('1')">
<input type="button" value="2" onclick="addToResult('2')">
<input type="button" value="3" onclick="addToResult('3')">
<input type="button" value="+" onclick="addToResult('+')">
<br>
<input type="button" value="4" onclick="addToResult('4')">
<input type="button" value="5" onclick="addToResult('5')">
<input type="button" value="6" onclick="addToResult('6')">
<input type="button" value="-" onclick="addToResult('-')">
<br>
<input type="button" value="7" onclick="addToResult('7')">
<input type="button" value="8" onclick="addToResult('8')">
<input type="button" value="9" onclick="addToResult('9')">
<input type="button" value="*" onclick="addToResult('*')">
<br>
<input type="button" value="0" onclick="addToResult('0')">
<input type="button" value="=" onclick="calculateResult()">
<input type="button" value="/" onclick="addToResult('/')">
<input type="button" value="C" onclick="clearResult()">
</div>
<script src="calculator.js"></script>
</body>
</html>
```
JavaScript代码:
```js
let result = '';
function addToResult(value) {
result += value;
document.getElementById('result').value = result;
}
function calculateResult() {
try {
result = eval(result);
document.getElementById('result').value = result;
} catch (error) {
alert('Invalid expression');
clearResult();
}
}
function clearResult() {
result = '';
document.getElementById('result').value = '';
}
```
这个计算器使用了eval()函数来计算表达式的值,但需要注意的是,eval()函数有安全风险,因为它可以执行任意的JavaScript代码。如果你需要更加安全的计算器实现,可以使用其他方式来解析和计算表达式,比如使用正则表达式或者自己实现一个表达式解析器。