用js实现一个简单的计算器
首先是格式
用表格简单地把计算器的样式写出来
<table border="1">
<tr>
<td style="border:0;">计算器</td>
</tr>
<tr>
<td>
第一个数:<input type="text" id="num1" /><br>
第二个数:<input type="text" id="num2" /><br>
计算结果:<input type="text" id="result" />
</td>
<td id="ss">
<button type="button">+</button><br />
<button type="button">-</button><br />
<button type="button">*</button><br />
<button type="button">/</button>
</td>
</tr>
</table>
其次是js实现效果
<script>
var num1 = document.getElementById("num1");//声明第一个数
var num2 = document.getElementById("num2");//声明第二个数
var num3 = document.getElementById("result");//声明结果
addEventListener("click", function(event) {
var obj = event.target;//声明点击对象属性
var v = obj.innerHTML;
if (isNaN(num1.value) || isNaN(num2.value)) {
alert("不能为非数字!");
}
if (v == "+") {
if (num1.value == "" || num2.value == "") {
alert('输入框不能为空!');
}
num3.value = parseFloat(num1.value) + parseFloat(num2.value);
}
if (v == "-") {
if (num1.value == "" || num2.value == "") {
alert('输入框不能为空!');
}
num3.value = parseFloat(num1.value) - parseFloat(num2.value);
}
if (v == "*") {
if (num1.value == "" || num2.value == "") {
alert('输入框不能为空!');
}
num3.value = parseFloat(num1.value) * parseFloat(num2.value);
}
if (v == "/") {
if (num1.value == "" || num2.value == "") {
alert('输入框不能为空!');
}
if (num2.value == 0) {
alert("除数不能为0!")
}
num3.value = parseFloat(num1.value) / parseFloat(num2.value);
}
})
</script>
效果图