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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了使用js创建一个实现+-*/算法的计算器，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1256字，纯文字阅读大概需要2分钟。

内容图文

如何使用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>

内容总结

以上是互联网集市为您收集整理的使用js创建一个实现+-*/算法的计算器全部内容，希望文章能够帮你解决使用js创建一个实现+-*/算法的计算器所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/736471.html

来源：【匿名】