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 相关文章推荐
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
layui table设置某一行的字体颜色方法
Sep 05 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的autoload自动加载机制使用说明
2010/12/28 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
js常用代码段收集
2011/10/28 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
js 颜色选择插件
2017/01/23 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
python中argparse模块用法实例详解
2015/06/03 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
python实现redis三种cas事务操作
2017/12/19 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
Python socket 套接字实现通信详解
2019/08/27 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
COSETTE官网:奢华,每天
2020/03/22 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
大学生学期个人总结
2015/02/12 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
python spilt()分隔字符串的实现示例
2021/05/21 Python