Register
> 博客>

js计算器代码加减乘除

新星源码网 1月 31日 2 0 

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
input[type="button"] {
width: 50px;
height: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Calculator</h2>
<input type="text" id="display" disabled>
<br>
<input type="button" value="1" onclick="addToDisplay('1')">
<input type="button" value="2" onclick="addToDisplay('2')">
<input type="button" value="3" onclick="addToDisplay('3')">
<input type="button" value="+" onclick="addToDisplay('+')">
<br>
<input type="button" value="4" onclick="addToDisplay('4')">
<input type="button" value="5" onclick="addToDisplay('5')">
<input type="button" value="6" onclick="addToDisplay('6')">
<input type="button" value="-" onclick="addToDisplay('-')">
<br>
<input type="button" value="7" onclick="addToDisplay('7')">
<input type="button" value="8" onclick="addToDisplay('8')">
<input type="button" value="9" onclick="addToDisplay('9')">
<input type="button" value="*" onclick="addToDisplay('*')">
<br>
<input type="button" value="C" onclick="clearDisplay()">
<input type="button" value="0" onclick="addToDisplay('0')">
<input type="button" value="/" onclick="addToDisplay('/')">
<input type="button" value="=" onclick="calculate()">
<script>
function addToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
var expression = document.getElementById('display').value;
var result = eval(expression);
document.getElementById('display').value = result;
}
</script>
</body>
</html>

此代码创建了一个简单的 HTML 页面，其中包含一个文本框显示器用于显示输入和计算结果，并有一组按钮用于输入数字和操作符。JavaScript 函数 addToDisplay() 用于将按钮点击的值添加到显示器中，clearDisplay() 用于清除显示器，calculate() 函数用于执行计算器中的表达式。eval() 函数用于计算字符串表达式的值，但在生产环境中，可能需要使用更安全的方法来解析和计算表达式。

错误处理：在用户输入不合法表达式时提供友好的错误提示。小数支持：使计算器能够处理小数点。清除单个字符：添加一个退格按钮，允许用户删除最后一个输入的字符。键盘支持：允许用户使用键盘输入数字和操作符。界面美化：美化界面，使其更具吸引力和易用性。

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
input[type="button"] {
width: 50px;
height: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Calculator</h2>
<input type="text" id="display" disabled>
<br>
<input type="button" value="1" onclick="addToDisplay('1')">
<input type="button" value="2" onclick="addToDisplay('2')">
<input type="button" value="3" onclick="addToDisplay('3')">
<input type="button" value="+" onclick="addToDisplay('+')">
<br>
<input type="button" value="4" onclick="addToDisplay('4')">
<input type="button" value="5" onclick="addToDisplay('5')">
<input type="button" value="6" onclick="addToDisplay('6')">
<input type="button" value="-" onclick="addToDisplay('-')">
<br>
<input type="button" value="7" onclick="addToDisplay('7')">
<input type="button" value="8" onclick="addToDisplay('8')">
<input type="button" value="9" onclick="addToDisplay('9')">
<input type="button" value="*" onclick="addToDisplay('*')">
<br>
<input type="button" value="C" onclick="clearDisplay()">
<input type="button" value="0" onclick="addToDisplay('0')">
<input type="button" value="." onclick="addToDisplay('.')">
<input type="button" value="/" onclick="addToDisplay('/')">
<br>
<input type="button" value="=" onclick="calculate()">
<input type="button" value="Backspace" onclick="backspace()">
<script>
function addToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
var expression = document.getElementById('display').value;
try {
var result = eval(expression);
document.getElementById('display').value = result;
} catch (error) {
document.getElementById('display').value = 'Error';
}
}
function backspace() {
var currentValue = document.getElementById('display').value;
document.getElementById('display').value = currentValue.slice(0, -1);
}
</script>
</body>
</html>

这个示例代码为计算器增加了小数点和退格按钮，并通过 try-catch 语句处理了用户可能输入的错误表达式，以提供更好的用户体验。

Related

热门文章

微海报