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 相关文章推荐
Array.prototype.slice 使用扩展
Jun 09 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
JS实现图片切换特效
Dec 23 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
什么是短波收听SWL
2021/03/01 无线电
如何写php程序?
2006/12/08 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
Python字符串详细介绍
2015/05/09 Python
python模块之re正则表达式详解
2017/02/03 Python
Python多层装饰器用法实例分析
2018/02/09 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
出纳试用期自我鉴定
2014/04/07 职场文书
2015年教研工作总结
2015/05/23 职场文书
地雷战观后感
2015/06/09 职场文书
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL