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是一个事件驱 ...
随机推荐
- Vue.js新手入门指南
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
- 一步一步学Silverlight 2系列（10）：使用用户控件
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- Android零碎知识点，之后会一直更新的哦！
view的getCompoundDrawables()方法,调用这个方法返回的是控件的左上右下四个位置的Drawable,并且返回的类型是数据 setBounds(x,y,width,height); ...
- 666 专题三 KMP & 扩展KMP & Manacher
KMP: Problem A.Number Sequence d.求子串首次出现在主串中的位置 s. c. #include<iostream> #include<stdio.h&g ...
- I.MX6 system.img unpack repack
/************************************************************************* * I.MX6 system.img unpack ...
- 获取指定类型如枚举/属性上自定义attribue值
有时候我们用数字来区分一些类型,如1:中国银行,2:建设银行,3:工商银行,…….这时候我在代码中通常会定义枚举来与定义的一一对应,并在该枚举值上设置特性来表示所代表的含义,这样避免多处写一些数字来标 ...
- Python mutilprocess模块之第二种创建进程方法--继承Process类
'''创建新的进程的第二种方法: 使用类的方式,可以自己定义一个类,继承Process类,每次实例化这个类的时候, 就等于实例化一个进程对象 '''from multiprocessing impor ...
- 879C
贪心 题目看错了...还以为是从操作序列中选5个...然后半个小时没了... 我们把每位分别用0和1带入,看看返回值是什么,然后分类讨论.千万不用特判!!!之前忘了删了就fst... #include ...
- iOS多线程GCD的简单使用
在iOS开发中,苹果提供了三种多线程技术,分别是: (1)NSThread (2)NSOperation (3)GCD 简单介绍一下GCD的使用. GCD全称 Grand Central Dispat ...
- word-break: break-all word-break:keep-all word-wrap: break-word三者的区别
word-break属性:指定非CJK脚本的断行规则. 值 描述 normal 使用浏览器默认的换行规则. break-all 允许在单词内换行. keep-all 只能在半角空格或连字符处换行. w ...