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

如何使用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>
上一篇:python 练习题- 文件取值排序


下一篇:spring boot:spring security用mysql数据库实现RBAC权限管理(spring boot 2.3.1)