<!DOCTYPE html>

<html>

 <head>

  <title> 事件</title>

  <script type="text/javascript">

   function count(){

       var fnum=document.getElementById("txt1").value;//获取第一个输入框的值

        var snum=document.getElementById("txt2").value;//获取第二个输入框的值

        var sel=document.getElementById("select").value//获取选择框的值

        var sum=0;

        switch(sel){//获取通过下拉框来选择的值来改变加减乘除的运算法则

            case "+":

                sum=parseFloat(fnum)+parseFloat(snum);//通过getElementById方式获取的value值默认为字符串类型

                break;

            case "-":

                sum=fnum-snum;

                break;

            case "*":

                sum=fnum*snum;

                break;

            default:

                sum=fnum/snum;

                break;

        }

    //设置结果输入框的值

    document.getElementById("fruit").value=sum;

   }

  </script>

 </head>

 <body>

   <input type='text' id='txt1' />

   <select id='select'>

        <option value='+'>+</option>

        <option value="-">-</option>

        <option value="*">*</option>

        <option value="/">/</option>

   </select>

   <input type='text' id='txt2' />

   <input type='button' value=' = ' onclick='count()'/> <!--通过 = 按钮来调用创建的函数，得到结果-->

   <input type='text' id='fruit' />

 </body>

</html>

效果图：

能够实现基本的算数运算，一个选择框，两个文本框，一个按钮

主要的事件响应：

  1. onclick 鼠标单击事件（通常与按钮一起使用）
  2. onmouseover 鼠标经过事件（一般用于提示）
  3. onmouseout 鼠标移开事件
  4. onchange 文本框内容改变事件
  5. onselect 文本框内容被选中事件
  6. onfocus 光标聚焦事件
  7. onblur 光标离开事件
  8. onload 加载事件（加载页面时，触发onload事件，事件写在<body>标签。写哪监听哪。）
  9. onunload 卸载事件（当用户退出页面时，如页面关闭“这里的关闭指的是页面的跳转”、刷新时触发）

onload事件的作用：

加载事件可以在页面加载前通过JS代码对页面样式做出调整，比如检测浏览器宽度屏幕分辨率之后，调整页面的相应尺寸

JS学习-事件响应小结-简单的计算器的更多相关文章

  1. 图表工具--- ECharts.js学习（一） 简单入门

    ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...

  2. js利用点击事件做一个简单的计算器

    先放一个样式图: 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  3. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  4. ECharts.js学习（一） 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  5. 2-4 js基础-事件对象小结

    var e=ev||event; e.cancelBubble=true; document.documentElement   html document.body                  ...

  6. cube.js 学习（一）简单项目创建

    cube.js 是一个很不错的模块化分析框架,基于schema生成sql 同时内置可代码生成,可以快速的搞定 web 分析应用的开发 安装cli 工具 npm install -g cubejs-cl ...

  7. JS keycode 事件响应

    <script language="javascript"> function keyevent(){ if(event.keyCode==13) alert(&quo ...

  8. js eval函数写一个简单的计算器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. Node.js学习起步

    Node.js学习: 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一个事件驱 ...

随机推荐

  1. 启动vmware中的虚拟机的时候，提示Failed to lock the file

    http://www.vixual.net/blog/archives/842 VMware Server 當掉後重新啟動 Guest OS 時,出現 cannot open the disk '*. ...

  2. IntelliJ IDEA 注册码 有效期截止于2018/10/14

    来源: http://idea.lanyus.com/ IntelliJ IDEA 注册码: EB101IWSWD-eyJsaWNlbnNlSWQiOiJFQjEwMUlXU1dEIiwibGljZW ...

  3. CentOS 7中ip命令将逐渐取代 ifconfig

    首先看下图: 要安装ip,请点击这里下载iproute2套装工具 .不过,大多数Linux发行版已经预装了iproute2工具. 你也可以使用git命令来下载最新源代码来编译: $ git clone ...

  4. sublime text 3 安装vue 语法插件

    1.下载https://github.com/vuejs/vue-syntax-highlight,点击这里也可以下载压缩包 2.解压到C:\Users\***\AppData\Roaming\Sub ...

  5. Java常用数据结构和算法

    二叉树: 1.每个结点不能多于两个子树: 2.一颗平衡二叉树的深度要比及结点个数N小得多. 二叉查找树: 1.结点x的所有左子树的值小于x,所有右子树的值大于x: AVL树: 1.一种带有平衡条件的二 ...

  6. BZOJ_2251_[2010Beijing Wc]外星联络_后缀数组

    BZOJ_2251_[2010Beijing Wc]外星联络_后缀数组 Description 小 P 在看过电影<超时空接触>(Contact)之后被深深的打动,决心致力于寻 找外星人的 ...

  7. 「网络流24题」「LuoguP4016」 负载平衡问题

    Description GGG 公司有 nnn 个沿铁路运输线环形排列的仓库,每个仓库存储的货物数量不等.如何用最少搬运量可以使 nnn 个仓库的库存数量相同.搬运货物时,只能在相邻的仓库之间搬运. ...

  8. noip数学

    一.取模运算 (1)定义 给定一个正整数p和一个整数n 一定存在此等式 n=k*p+r;其中k,r是整数,r大于等于0小于p 称k是n除以p的商,r为n除以p的余数 说明:同余式 正整数a,b对p取模 ...

  9. 移植tslib库出现selected device is not a touchscreen I understand的解决方法

    首发平台:微信公众号baiwenkeji 很多人在做触摸屏驱动实验,移植tslib库时,可能会出现错误提示“selected device is not a touchscreen I underst ...

  10. idea类名下有红色波浪线

    能编译通过说明SDK导入正确,但是为啥我们点击每一个Java文件会出现好多红色的下划线 ,并提示idea cant resolve symbol 原因就是可能没有清除原来的历史缓存,导致一些错误,解决 ...