首页 > 开发 > JavaScript > 正文

js如何实现简易计算器

2020-03-22 16:15:14
字体:
来源:转载
供稿:网友

效果图:

c1736cec00a763b409f27e8235a479e.png

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

<body> <input type="text" id="ipt1"> <select name="" id="slt">  <option html' target='_blank'>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如何实现简易计算器的详细内容,更多请关注武林网其它相关文章!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表