<!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. ElementUI的Upload上传，配合七牛云储存图片

    七牛云服务器的储存区域 存储区域 地域简称 上传域名 华东 z0 服务器端上传:http(s)://up.qiniup.com 华东 z0 客户端上传: http(s)://upload.qiniup ...

  2. ORACLE 创建表空间及用户

    /*创建存放原始数据的表空间*/ create tablespace Djzh_original datafile 'E:\APP\ADMINISTRATOR\ORADATA\ORCL\Djzh_or ...

  3. 一个小bug，关于fuse_mount_sys

    在mount.c  中的 int fuse_mount_sys 函数中,如果注销掉 fd的open语句,此时fd一般为0. 然后,用普通用户运行ssfs且不加-f参数,一切显示正常 fuse_moun ...

  4. Getting Started with the Intel Media SDK

    By Gael Hofemeier on March 19, 2015 Follow Gael on Twitter: @GaelHof Media SDK Developer’s Guide Med ...

  5. hdu-5720 Wool(区间并+扫描线)

    题目链接: Wool Time Limit: 8000/4000 MS (Java/Others)     Memory Limit: 262144/262144 K (Java/Others) Pr ...

  6. 【POJ 2407】 Relatives

    [题目链接] 点击打开链接 [算法] 欧拉函数 [代码] #include <algorithm> #include <bitset> #include <cctype& ...

  7. OrChard快速开发一个网站,个人网站

    Orchard中文 登录 主页 文档 下载 博客文章 论坛 联系我们 Orchard是一个以微软为主导的开源CMS项目,它允许使用者在Asp.Net平台上快速建立网站,并且提供扩展框架能够允许定制人员 ...

  8. rsync(二)：inotify+rsync详细说明和sersync

    以下是rsync系列篇: inotify+rsync 如果要实现定时同步数据,可以在客户端将rsync加入定时任务,但是定时任务的同步时间粒度并不能达到实时同步的要求.在Linux kernel 2. ...

  9. 【旧文章搬运】对抗RKU的StealthCode检测

    原文发表于百度空间,2009-07-02========================================================================== 快一个月没 ...

  10. thrift配置——windows客户端与linux服务端通信（C++）

    windows客户端: 1.首先要安装boost库 下载源文件 2.安装boost之前先要安装python-3.4.0.amd64,很多地方没有说,弄了很久 3.运行bootstrap.bat 生成b ...