怎么用JavaScript制作简易计算器

发布时间:2021-08-12 17:01:10 作者:chen
来源:亿速云 阅读:157

本篇内容介绍了“怎么用JavaScript制作简易计算器”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

这个简易的计算器只能实现 + - * /的运算

在动手之前,我们要先理清思路,看图,若想实现这样一个简易的计算器,我们需要两个输入框用来存放我们需要进行运算的两个值,一个下拉框来选择要进行什么运算,一个按钮来实现开始运算,一个输入框来保存我们计算后的值!

首先,我们在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的地方了

<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制作简易计算器”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. HTML+CSS+JavaScript如何制作简易计算器
  2. JavaScript简易计算器制作

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:JavaScript中闭包的概念、原理及作用是什么

下一篇:OpenStack4j中怎么实现一个对外接口

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》