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 相关文章推荐
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
javascript对象之内置对象Math使用方法
Apr 16 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 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搭建聊天室功能实例代码
2012/08/20 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
JS input 数字验证代码
2009/07/30 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
用python实现名片管理系统
2020/06/18 Python
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
几个常见的软件测试问题
2016/09/07 面试题
年度考核自我鉴定
2014/03/19 职场文书
工作推荐信范文
2014/05/10 职场文书
开工仪式策划方案
2014/05/23 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
Python快速优雅的批量修改Word文档样式
2021/05/20 Python