A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

写在前面:运用js中的一些功能实现计算器加减乘除的功能。

主要代码:

<body>
        <input type="text" name="" id="txt-num1" >
        <select id="sel">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="/">/</option>
                <option value="*">*</option>
        </select>
        <input type="text" name="" id="txt-num2">
        <button id="btn-cal">=</button>
        <input type="text" name="" id="txt-result">
        <script type="text/javascript">
                var o=document.getElementById('btn-cal');//找到按钮对象
                //查找输入框
                var t1=document.getElementById('txt-num1');
                var t2=document.getElementById('txt-num2');
                var t3=document.getElementById('txt-result');
                //下拉框
                var s=document.getElementById('sel');
                //给按钮添加点击事件
                o.onclick=function(){
                        //完成计算
                        //取出两个输入框的值   操作数
                        var v1=parseFloat(t1.value);//string--->number
                        var v2=parseFloat(t2.value);
                        console.log(v1);
                        var result;
                        // console.log(v1,v2);
                        //判断要进行的运算
                        switch(s.value){
                                case "+":
                                        result=v1+v2;
                                break;
                                case "-":
                                        result=v1-v2;
                                break;
                                case "*":
                                        result=v1*v2;
                                break;
                                case "/":
                                        result=v1/v2;
                                break;
                                default:
                                        result=v1+v2;
                                break;
                        }
                        //将运算结果保存在输入框中
                        t3.value=result;
                }
        </script>
</body>

---------------------
【转载,仅作分享,侵删】
作者:Ryan Ji
原文:https://blog.csdn.net/qq_42451979/article/details/80885020
版权声明:本文为博主原创文章,转载请附上博文链接!

1 个回复

倒序浏览
奈斯,感谢分享!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马