写一个网页计算器,页面上有两个输入框,分别输入待运算的数字,还有一个单独的输入框,显示运算结果。要求输入框的类型为text
时间: 2024-05-30 19:16:36 浏览: 134
jisuanqi.rar_html显示时间_计算器 html
,且只能输入数字和小数点,运算符号通过按钮进行选择。
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页计算器</title>
<meta charset="utf-8">
<style type="text/css">
input[type="text"] {
width: 200px;
padding: 5px;
font-size: 16px;
margin-bottom: 10px;
}
input[type="button"] {
width: 50px;
padding: 5px;
font-size: 16px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1>网页计算器</h1>
<input type="text" id="num1" placeholder="请输入第一个数字">
<input type="text" id="num2" placeholder="请输入第二个数字">
<br>
<input type="button" value="+" onclick="calculate('+')">
<input type="button" value="-" onclick="calculate('-')">
<input type="button" value="×" onclick="calculate('*')">
<input type="button" value="÷" onclick="calculate('/')">
<br>
<input type="text" id="result" placeholder="运算结果">
<script type="text/javascript">
function calculate(operator) {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
if (isNaN(num1) || isNaN(num2)) {
alert("请输入数字!");
return;
}
switch (operator) {
case '+':
document.getElementById("result").value = num1 + num2;
break;
case '-':
document.getElementById("result").value = num1 - num2;
break;
case '*':
document.getElementById("result").value = num1 * num2;
break;
case '/':
if (num2 === 0) {
alert("除数不能为0!");
return;
}
document.getElementById("result").value = num1 / num2;
break;
default:
break;
}
}
</script>
</body>
</html>
```
JavaScript代码解释:
1. 获取输入框中的数字并转换为浮点数,如果输入的不是数字,则弹出提示框并返回。
2. 根据运算符号进行相应的运算,运算结果通过id为"result"的输入框显示。
效果截图:
![网页计算器效果截图](https://cdn.luogu.com.cn/upload/image_hosting/jt8i6v0s.png)
阅读全文