js实现一个计算器

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<body>
<div class="calDiv">
    <h2 >计算器</h2>
    <form name="calForm">
        <table >
            <tr>
                <td>num1:</td>
                <td><input type="text" name="num1"></td>
            </tr>
            <tr>
                <td>num2:</td>
                <td><input type="text" name="num2"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <button type="button">+</button>
                    <button type="button">-</button>
                    <button type="button">x</button>
                    <button type="button">➗</button>
                </td>
            </tr>
            <tr>
                <td>结果:</td>
                <td>
                    <input type="text" name="result" disabled/>
                </td>
            </tr>
        </table>
    </form>
</div>
<script>
    /**
     * 根据标签名获得该标签的所有元素对象，返回一个对象数组
     */
    let btnArr = document.getElementsByTagName("button");
    /**
     * 循环为每个按钮注册单击事件
     * innerHTNL:用于获取或设置标签体的值
     * trim():截取字符串两端的空格
     */
    for (let btn of btnArr) {
        btn.addEventListener('click', function () {
            let fuHao = this.innerHTML.trim();
            cla(fuHao);
        })
    }

    function cla(fuHao) {
        //从界面获取的数据都是字符串
        //获得num1的值
        //获得name属性值为num1的input对象
        let num1Obj = document.calForm.num1;
        //获得num1中的值
        let num1 = num1Obj.value;
        //将num1转换为小数
        //num1=parseInt(num1);
        num1 = parseFloat(num1);
        //获得num2的值
        let num2 = parseFloat(document.calForm.num2.value);
        //用于统计计算结果的变量
        let result = '';
        switch (fuHao) {
            case '+':
                result = num1 + num2;
                break;
            case '-':
                result = num1 - num2;
                break;
            case 'x':
                result = num1 * num2;
                break;
            case '➗':
                if (num2 == 0) {
                    alert("除数不能为零！");
                    return;//返回直接退出函数的执行
                }
                result = num1 / num2;
                break;
        }
        //将计算的结果赋给result输入框
        document.calForm.result.value=result;
    }
</script>
</body>
</html>
posted @ 2021-06-16 17:27  陌青  阅读(292)  评论(0)    收藏  举报