温馨提示×

温馨提示×

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

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

js如何实现简易计算器功能

发布时间:2021-04-19 11:33:32 来源:亿速云 阅读:174 作者:小新 栏目:web开发

这篇文章将为大家详细讲解有关js如何实现简易计算器功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

制作能进行加减乘除的简易计算器,主要是练习动态注册事件。因以练习为主,所以包含了较多基础方法。

效果图

js如何实现简易计算器功能

代码

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>简易计算器</title>  <script type="text/javascript">  window.onload = function(){  document.onclick = function(){   var ipts = document.getElementsByTagName("input");   for (var i = 0; i < ipts.length; i++) {//得到值和符号   if (ipts[i].type == "text") {   switch (i){   case 0:    num1 = ipts[i].value;    num1 = Number(num1);    break;   case 1:    opt = ipts[i].value;    break;   case 2:    num2 = ipts[i].value;    num2 = Number(num2);    break;   }   }   }   var res;//结果   switch (opt){//通过得到的值和符号进行计算   case "+":   res = num1 + num2;   break;   case "-":   res = num1 - num2;   break;   case "*":   res = num1 * num2;   break;   case "/":   res = num1 / num2;   break;   }      var r = document.getElementById("result");   r.value = res;  }   }  </script>  </head>  <body>  <input type="text">  <input type="text">  <input type="text">=  <input type="text" id="result">  <input type="button" value="计算" id="btn">  </body> </html>

关于“js如何实现简易计算器功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

向AI问一下细节

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

AI