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 sortable效果 代码有错但值得看看
Nov 05 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
js模拟实现百度搜索
Jun 28 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提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
javascript数据类型详解
2017/02/07 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
js正则相关知识点专题
2018/05/10 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
tornado框架blog模块分析与使用
2013/11/21 Python
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python表示矩阵的方法分析
2017/05/26 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
法学毕业生自我鉴定
2013/11/08 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
物业管理专业自荐信
2014/07/01 职场文书
防灾减灾活动总结
2014/08/30 职场文书
小学工作总结2015
2015/05/04 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
windows系统安装配置nginx环境
2022/06/28 Servers