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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 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
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
python实现数据库跨服务器迁移
2018/04/12 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
初中家长评语大全
2014/12/26 职场文书
护士求职自荐信范文
2015/03/04 职场文书
教师素质教育心得体会
2016/01/19 职场文书