使用js创建一个实现+-*/算法的计算器

最新推荐文章于 2021-06-12 19:29:34 发布

東耳哟。

最新推荐文章于 2021-06-12 19:29:34 发布

阅读量474

点赞数

CC 4.0 BY-SA版权

文章标签： js 简单四则运算

本文链接：https://blog.youkuaiyun.com/weixin_44200575/article/details/99692992

本文介绍如何使用JavaScript创建一个基本的四则运算计算器。通过定义插件布局，为元素添加ID，利用ID查找页面元素，添加点击事件，实现数字提取与运算，并将结果展示在页面上。

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

如何使用js创建一个实现+-*/算法的计算器

- - - - 思路
      - 下面是参考代码：

思路

1.定义插件，在页面中显示计算器的排版
2.为插件定义id,方便后期查找
3.根据id查找页面元素
4.添加点击事件，在点击等号时，提取数字并进行运算
5.将数据展示到页面中

下面是参考代码：

<body>
    <input type="text" id="txt-op1">
    <select name="" id="slt">
        <option >+</option>
        <option >-</option>
        <option >*</option>
        <option >/</option>
    </select>
    <input type="text" id="txt-op2">
    <button id="btn">=</button>
    <input type="text" id="txt-result">


    <script>
        //根据ID查找页面元素
        var btn=document.getElementById('btn');
        var txt1=document.getElementById('txt-op1');
        var txt2=document.getElementById('txt-op2');
        var txtValue=document.getElementById('txt-result');
        var slt=document.getElementById('slt');
        var endValue;//运算结果
        
        // console.log(btn);
        //添加点击事件
        btn.onclick=function(){
            // console.log(txt1.value,txt2.value);
            // console.log(slt.value);
            // txt1.value slt.value txt2.value;
            switch(slt.value){
                case "+":
                    endValue=parseFloat(txt1.value)+parseFloat(txt2.value);
                break;
                case "-":
                    endValue=txt1.value-txt2.value;
                break;
                case '*':
                    endValue=txt1.value*txt2.value;
                break;
                case '/':
                    endValue=txt1.value/txt2.value;
                break;
                default:
                    endValue=txt1.value+txt2.value;
                break;
            }
            // console.log(endValue);
            //将数据展示到页面中
            txtValue.value=endValue;
        };
    </script>