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 相关文章推荐
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
js操作滚动条事件实例
Jan 29 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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扩展函数
2006/10/09 PHP
PHP的FTP学习(三)
2006/10/09 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
js实现烟花特效
2020/03/02 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
python根据出生日期获得年龄的方法
2015/03/31 Python
微信跳一跳python代码实现
2018/01/05 Python
python去除扩展名的实例讲解
2018/04/23 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
Python实现word2Vec model过程解析
2019/12/16 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
什么是.net的Remoting技术
2016/07/08 面试题
explicit和implicit的含义
2012/11/15 面试题
青蓝工程实施方案
2014/03/27 职场文书
英文请假条
2014/04/11 职场文书
Echarts如何重新渲染实例详解
2022/05/30 Javascript