• 技术文章 >web前端 >js教程

    js如何实现简易计算器

    王林王林2020-03-12 11:17:53转载1136

    效果图:

    c1736cec00a763b409f27e8235a479e.png

    首先,我们在body中制作页面需要的这些元素

    <body>
     <input type="text" id="ipt1">
     <select name="" id="slt">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
     </select>
     <input type="text" id="ipt2">
     <button id="btn">=</button>
     <input type="text" id="ipt3">
    </body>

    上面的id你可随意起,好用就行。

    (推荐教程:javascript教程

    javascript代码:

    <body>
     <script>
      //获取页面标签的元素
      var inpt1 = document.getElementById("ipt1");
      var inpt2 = document.getElementById("ipt2");
      var inpt3 = document.getElementById("ipt3");
      var selt = document.getElementById("slt");
      var butn = document.getElementById("btn");
       
     //给等于按钮添加点击事件
      butn.onclick = function(){
       //将三个输入框的value值分别赋给变量t1,t2,t3中
       var t1 = parseFloat(ipt1.value);
       var t2 = parseFloat(ipt2.value);
       var t3 = parseFloat(ipt3.value);
     
     //定义一个结果变量用于存放结果
       var endValue;
       //用switch语句来写运算语句
       switch(slt.value){
        case "+":
        endValue = t1 + t2;
        break;
        case "-":
        endValue = t1 - t2;
        break;
        case "*":
        endValue = t1 * t2;
        break;
        case "/":
        endValue = t1 / t2;
        break;
        default:
        endValue = t1 + t2;
        break;
       }
       //将结果放入结果输入框的value值中,在页面上显示
       inpt3.value = endValue;
      }
     </script>
    </body>

    相关视频教程推荐:javascript视频教程

    以上就是js如何实现简易计算器的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:脚本之家,如有侵犯,请联系admin@php.cn删除
    专题推荐:js
    上一篇:js如何利用键盘事件实现人物行走 下一篇:js如何判断一个对象是否是数组(函数)
    千万级数据并发解决方案

    相关文章推荐

    • 实例详解js数组方法slice()的用法• js如何判断打开项目的浏览器类别• js如何实现滑动门效果• js如何利用键盘事件实现人物行走
    1/1

    PHP中文网