前端代码制作简易的计算器

最新推荐文章于 2023-11-09 11:24:55 发布

梓谦

最新推荐文章于 2023-11-09 11:24:55 发布

阅读量933

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_46484190/article/details/123152564

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
</head>
<body>
    <input type="text" id="oneNum" />
    <select id="operator" />
        <option value="1">+</option>
        <option value="2">-</option>
        <option value="3">*</option>
        <option value="4">/</option>
        <option value="5">%</option>
    </select>
    <input type="text" id="twoNum">
    <span>=</span>
    <span id="result"></span>
    <button id="btn">计算</button>

    <script>
        var oneNum = document.querySelector('#oneNum');
        var twoNum = document.querySelector('#twoNum');
        var operator = document.querySelector('#operator');
        var result = document.querySelector('#result');
        var btn = document.querySelector('#btn');

        btn.onclick = function () {


            if (operator.value == 1) {

                result.innerHTML = parseFloat(oneNum.value) + parseFloat(twoNum.value);

            } else if (operator.value == 2) {

                result.innerHTML = oneNum.value - twoNum.value;

            }else if (operator.value == 3) {

                result.innerHTML = oneNum.value * twoNum.value;

            }else if (operator.value == 4) {

                result.innerHTML = oneNum.value / twoNum.value;


            }else if (operator.value == 5) {

                result.innerHTML = oneNum.value % twoNum.value;
            }

        //     switch (operator.value) {
        //
        //         case '1':
        //             result.innerHTML = parseFloat(oneNum.value) + parseFloat(twoNum.value);
        //             break;
        //
        //         case '2':
        //             result.innerHTML = oneNum.value - twoNum.value;
        //             break;
        //
        //         case '3':
        //             result.innerHTML = oneNum.value * twoNum.value;
        //             break;
        //
        //         case '4':
        //             result.innerHTML = oneNum.value / twoNum.value;
        //             break;
        //
        //         case '5':
        //             result.innerHTML = oneNum.value % twoNum.value;
        //             break;
        //
        //     }
        }
    </script>
</body>
</html>

梓谦

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端代码制作简易的计算器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简易计算器</title></head><body> <input type="text" id="oneNum" /> <select id="operator" /> <option val
复制链接

扫一扫