js-计算器实现

最新推荐文章于 2020-03-25 13:22:53 发布

原创最新推荐文章于 2020-03-25 13:22:53 发布 · 437 阅读

1 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用JavaScript创建一个基本的计算器，包括选择加减乘除操作及计算结果的功能。通过下拉菜单选择运算符，点击按钮即可得到计算结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做一个计算器，下拉框选择加减乘除操作，点击按钮计算结果。
效果图如下

代码如下

<!DOCTYPE html>
<html>
<head>
    <title>计算</title>
    <script type="text/javascript">
        function jisuan(){
            var one = document.getElementById("one").value;//获取第一个数的value
            var two = document.getElementById("two").value;//获取第二个数的value
            var yunsuan = document.getElementById("yunsuan").value;//获取运算符号
            var result=0; 
            switch(yunsuan){
                case "+":
                    result=parseInt(one)+parseInt(two);
                    break;
                case "-":
                    result=parseInt(one)-parseInt(two);
                    break;
                case "*":
                    result=parseInt(one)*parseInt(two);
                    break;
                case "/":
                    result=parseInt(one)/parseInt(two);
                    break;
            }
            document.getElementById("result").value=result;

        }

    </script>
</head>
<body>
    <table>
        <tr>
            <td colspan="3">
                结果展示：<input type="text" value="" id="result">
            </td>
        </tr>
        <tr>
            <td>
                第一个数：<input type="text" value="" id="one">
            </td>
            <td>
                第二个数：<input type="text" value="" id="two">
            </td>
            <td>
                选择运算：<select id="yunsuan">
                    <option value="+" selected="">+</option>
                    <option value="-">-</option>
                    <option value="*">*</option>
                    <option value="/">/</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="计算" onclick="jisuan()">
            </td>
        </tr>
    </table>
</body>
</html>