JS学习-事件响应小结-简单的计算器
<!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>
效果图：
能够实现基本的算数运算，一个选择框，两个文本框，一个按钮
主要的事件响应：
- onclick 鼠标单击事件（通常与按钮一起使用）
- onmouseover 鼠标经过事件（一般用于提示）
- onmouseout 鼠标移开事件
- onchange 文本框内容改变事件
- onselect 文本框内容被选中事件
- onfocus 光标聚焦事件
- onblur 光标离开事件
- onload 加载事件（加载页面时，触发onload事件，事件写在<body>标签。写哪监听哪。）
- onunload 卸载事件（当用户退出页面时，如页面关闭“这里的关闭指的是页面的跳转”、刷新时触发）
onload事件的作用：
加载事件可以在页面加载前通过JS代码对页面样式做出调整，比如检测浏览器宽度屏幕分辨率之后，调整页面的相应尺寸
JS学习-事件响应小结-简单的计算器的更多相关文章
- 图表工具--- ECharts.js学习（一） 简单入门
ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...
- js利用点击事件做一个简单的计算器
先放一个样式图: 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- ECharts.js学习（一） 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- 2-4 js基础-事件对象小结
var e=ev||event; e.cancelBubble=true; document.documentElement html document.body ...
- cube.js 学习（一）简单项目创建
cube.js 是一个很不错的模块化分析框架,基于schema生成sql 同时内置可代码生成,可以快速的搞定 web 分析应用的开发 安装cli 工具 npm install -g cubejs-cl ...
- JS keycode 事件响应
<script language="javascript"> function keyevent(){ if(event.keyCode==13) alert(&quo ...
- js eval函数写一个简单的计算器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Node.js学习起步
Node.js学习: 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一个事件驱 ...
随机推荐
- C语言一个单链表的实现
-- 所谓链表记住一句即可:地址不连续,大家只是握个手而已: list0.c #include<stdio.h> #include<malloc.h> typedef int ...
- regmap使用介绍【转】
本文转载自:http://blog.csdn.net/hellowxwworld/article/details/10737569 内核3.1引入一套新的API regmap,目的是提取出关于I2C ...
- ⭐驱动之module_init/module_exit与系统启动关系
在前面helloworld的编写里面,我们使用了两个宏分别是module_init和module_exit,这里分析下为什么使用这两个宏. 在写模块的时候有两个特殊的函数,分别是init_module ...
- SVN命令使用详解【转】
本文转载自:http://blog.sina.com.cn/s/blog_963453200101eiuq.html 1.检出svn co http://路径(目录或文件的全路径) [本地目录全路 ...
- NSDictionary字典创建,获取,遍历,可变字典的删除 - iOS
字典是以键值对的形式来存储数据 key value 1 NSDictionary 字典 1.1 创建字典,不可变的 NSDictionary * dic = [NSDictionary diction ...
- 【hyddd驱动开发学习】DDK与WDK
最近尝试去了解WINDOWS下的驱动开发,现在总结一下最近看到的资料. 1.首先,先从基础的东西说起,开发WINDOWS下的驱动程序,需要一个专门的开发包,如:开发JAVA程序,我们可能需要一个JDK ...
- HNOI2017 day1 T2 影魔
题目大意: 影魔,奈文摩尔,据说有着一个诗人的灵魂.事实上,他吞噬的诗人灵魂早已成千上万.千百年来,他收集了各式各样的灵魂,包括诗人.牧师.帝王.乞丐.奴隶.罪人,当然,还有英雄. 每一个灵魂,都有着 ...
- htm5 vido.js 播放器
js统制html5 [video]标签中视频的播放和停止 需求:页面中有2个普通按钮a,b.还有一个video标签,能成功播放出视频..我想要的效果是,点击a按钮,视频开始播放,点击b按钮,视频播 ...
- CentOS下安装SecureCRT的sz/rz工具包
对于使用SecureCRT的玩家,rzsz是一个灰常灰常实用的功能.但是定制安装的linux可能没有把rzsz包安装到系统,这对用securecrt这样的windows工具传输文件特别不方便.为了使用 ...
- js 回调函数
一.前奏 在谈回调函数之前,先看下下面两段代码: 不妨猜测一下代码的结果. function say (value) { alert(value);}alert(say);alert(say('hi ...