<!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. CentOS 7.2 安装Gerrit 2.14.6

    1.环境 本文使用VMWare虚拟机进行实验. 2核CPU,4GB内存,20GB硬盘,IP:192.168.159.131 CentOS 7.2最小安装(CentOS-7-x86_64-Minimal ...

  2. ES6的相关新属性

    ES6  引入了类这个概念. 1.class……extends es6中的class与es5 中的function差不多: class Student extends People , student ...

  3. Go——godoc命令简介

    前言 godoc的一些简记 命令 godoc的列表 | godoc的chm下载 查看godoc的所有命令 `$ godoc -h` usage: godoc -http=localhost:6060 ...

  4. My Notes

    1.类似于border.margin.padding的四个方向数值顺序为上右下左.2.属性z-index参数值越大,则被层叠在最上面.3.标签<a>和属性display:block和适合在 ...

  5. skynet实践（8）-接入websocket

    我从开源项目(https://github.com/lipp/lua-websockets,这里我们简称LWS)中抽出了websocket的部分处理,步骤如下: 1)首先是解决LWS的几个依赖问题.L ...

  6. I.MX6 MAC Address hacking

    /************************************************************************** * I.MX6 MAC Address hack ...

  7. SPOJ：Harbinger vs Sciencepal（分配问题&不错的DP&bitset优化）

    Rainbow 6 is a very popular game in colleges. There are 2 teams, each having some members and the 2 ...

  8. 线段树之成段更新（ 需要用到延迟标记,简单来说就是每次更新的时候不要更新到底,用延迟标记使得更新延迟到下次需要更新or询问到的时候）

    HDU  1698 链接:  http://acm.hdu.edu.cn/showproblem.php?pid=1698 线段树功能:update:成段替换 (由于只query一次总区间,所以可以直 ...

  9. python-day-10-python mysql and ORM

    本节内容 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令事务  创建数据库 外键 增删改查表 权限 索引 python 操作mysql  ORM sq ...

  10. hdoj5821【贪心-神题】

    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊,比赛的时候直接读错题了,实力带坑队友.... 题意: 有两个序列都代表筐,每个筐里只有一个球,然后序列的值代表筐里的球的颜色,问你在m次操作后,a序列的球能否变成b ...