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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
13个PHP函数超实用
Oct 21 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
img标签中onerror用法
2009/08/13 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
外企财务年会演讲稿
2014/01/03 职场文书
护理个人求职信范文
2014/01/08 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
运动员口号
2014/06/09 职场文书
计算机毕业生求职信
2014/06/10 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android