编写一个简单的加减计算器,计算器提供数据两个输入框、一个数据输出框、加按钮、减按钮、清除按钮。 输入框供用户输入参与加减计算的两个数值, 输出框设置为不可输入状态,由程序控制输出加减的结果。 加减按钮被点击时,将输入框的加减结果在输出框输出。 清除按钮被点击时,清除输入、输出框的所有内容。 清除按钮再添加一个鼠标进入和鼠标移出行为的处理,当鼠标进入清除按钮时,鼠标变成手的符号,鼠标移出时,鼠标变成箭头符号。
时间: 2024-01-21 09:18:03 浏览: 66
以下是一个简单的加减计算器的HTML+JavaScript代码,实现了上述功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>加减计算器</title>
<style>
input {
width: 100px;
}
</style>
</head>
<body>
<input id="input1" type="number"> +
<input id="input2" type="number"> =
<input id="output" type="text" readonly>
<br><br>
<button onclick="add()">加</button>
<button onclick="sub()">减</button>
<button onclick="clearAll()" id="clear">清除</button>
<script>
function add() {
var input1 = parseFloat(document.getElementById("input1").value);
var input2 = parseFloat(document.getElementById("input2").value);
var result = input1 + input2;
document.getElementById("output").value = result;
}
function sub() {
var input1 = parseFloat(document.getElementById("input1").value);
var input2 = parseFloat(document.getElementById("input2").value);
var result = input1 - input2;
document.getElementById("output").value = result;
}
function clearAll() {
document.getElementById("input1").value = "";
document.getElementById("input2").value = "";
document.getElementById("output").value = "";
}
var clearButton = document.getElementById("clear");
clearButton.addEventListener("mouseover", function() {
clearButton.style.cursor = "pointer";
});
clearButton.addEventListener("mouseout", function() {
clearButton.style.cursor = "default";
});
</script>
</body>
</html>
```
在上述代码中,我们使用了HTML的input元素来实现输入和输出框,并且给加减按钮和清除按钮绑定了相应的JavaScript函数。其中,add()函数和sub()函数分别计算加法和减法的结果,并将结果输出到输出框中;clearAll()函数清空所有输入和输出框的内容。同时,我们还给清除按钮添加了鼠标进入和鼠标移出的事件处理函数,用来改变鼠标指针的样式。
阅读全文