用js写一个简单地计算器

261 阅读1分钟

用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>

效果图

2022-01-09_160758.png