js实现简易计算器功能


Posted in Javascript onOctober 18, 2019

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

效果图

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
js实现音乐播放控制条
Sep 09 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
前端深入理解Typescript泛型概念
Mar 09 Javascript
JavaScript实现更换背景图片
Oct 18 #Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 #jQuery
CountUp.js数字滚动插件使用方法详解
Oct 17 #Javascript
CountUp.js实现数字滚动增值效果
Oct 17 #Javascript
countUp.js实现数字动态变化效果
Oct 17 #Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 #jQuery
countup.js实现数字动态叠加效果
Oct 17 #Javascript
You might like
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
永不消失的title提示代码
2007/02/15 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
详解Python with/as使用说明
2018/12/13 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
tensorflow自定义激活函数实例
2020/02/04 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
女大学生毕业找工作的自我评价
2013/10/03 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
教师学期个人总结
2015/02/11 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
golang中的空接口使用详解
2021/03/30 Python
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
springboot+VUE实现登录注册
2021/05/27 Vue.js
Python基本知识点总结
2022/04/07 Python
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs