<!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. (C)strcpy ,strncpy和strlcpy的基本用法

    好多人已经知道利用strncpy替代strcpy来防止缓冲区越界. 但是如果还要考虑运行效率的话,也许strlcpy是一个更好的方式. 1. strcpy strcpy 是依据 /0 作为结束判断的, ...

  2. vue2-editor富文本基础使用方法

    vue2-editor的入门使用准备工作: 使用 npm install vue2-editor --save 安装到项目中去: 使用 在需要的单文件内引入 import { VueEditor } ...

  3. 织梦dedecms中修改标题与简略标题长度的方法

    本文介绍了dedecms中修改标题与简略标题长度的方法,进入dedecms后台,系统——系统基本参数——其他选项——文档标题最大长度——在这修改为200或更大. 一.修改标题 进入dedecms后台, ...

  4. C#在一段数字区间内随机生成若干个互不相同的随机数

    /// <summary>        /// Random ra=new Random();  系统自动选取当前时前作随机种子:        /// Random ra=new Ra ...

  5. codeforces 696C C. PLEASE(概率+快速幂)

    题目链接: C. PLEASE time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  6. 【CQ18阶梯赛第8场】题解

    [A:HDU2032 杨辉三角]: 简单的递推,或者是基础的DP: 但是只有杨润东一个人1A,整体准确率只有8/37,具体原因不详. 经验:提交前一定要试一下比较特殊的数据或者最大的数据.其次,为了保 ...

  7. 「网络流24题」「LuoguP2774」方格取数问题（最大流 最小割

    Description 在一个有 m*n 个方格的棋盘中,每个方格中有一个正整数.现要从方格中取数,使任意 2 个数所在方格没有公共边,且取出的数的总和最大.试设计一个满足要求的取数算法.对于给定的方 ...

  8. angularJS ng-if的用法

    ng-if主要是用来判断是否显示,也可以做为而者选择其中一个的方法,满足判断条件ng-if="变量名" 显示,否者不显示,也可以用ng-if="!变量名"取反, ...

  9. Bootstrap-CL：按钮组

    ylbtech-Bootstrap-CL:按钮组 1.返回顶部 1. Bootstrap 按钮组 按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.您可以通过 Boot ...

  10. Sublime text 安装Package Control

    Package Control 插件是一个方便 Sublime text 管理插件的插件,但因为 Sublime Text 3 更新了 Python 的函数,API不同了,导致基于 Python 开发 ...