有聚焦,肯定就有失焦。onblur事件与onfocus是相对事件,当光标离开当前获得聚
焦对象的时候,触发onblur事件,同时执行被调用的程序。
如下代码,网页中有用户和密码两个文本框。当前光标在用户文本框内时(即焦点在
文本框),在光标离开该文本框后(即失焦时),触发onblur事件,并调用message()
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>失焦事件</title>
<script type="text/javascript">
function message(){
alert("请确定已输入用户名后,在离开!")}
</script>
</head>
<body>
<form>
用户:<input name="username" type="text" value="请输入用户名:" onblur="message()">
密码:<input name="password" type="text" value="请输入密码:">
</form>
</body>
</html>
选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用
的程序就会被执行。
如下代码,当选中用户文本框内的文字时,触发onselect事件,并调用函数message()
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onselect</title>
<script type="text/javascript">
function message(){
alert("您触发了选中事件");}
</script>
</head>
<body>
<form>
用户:<input name="username" type="text" value="请输入用户名!" onselect="message()">
<!-- 当选中用户文本框内的文字时,触发onselect事件。 -->
</form>
</body>
</html>
通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。如下代码,
当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!"
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onChange</title>
<script type="text/javascript">
function message(){alert("您改变了文本内容!")}
</script>
</head>
<body>
<form>
用户:<input name="username" type="text" value="请输入用户名" onChange="message()">
<!-- 当改变用户文本框内的文字后,触发onChange事件。 -->
</form>
</body>
</html>
事件会在页面加载完成后,立即发生,同时执行被调用的程序。注意:1.加载页面
时,触发onload事件,事件写在<body>标签内。2.此节的加载页面,可理解为打开
一个新页面时。如下代码,当加载一个新页面时,弹出对话框"加载中,请稍等..."
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onLoad</title>
<script type="text/javascript">
function message(){
alert("加载中,请稍等...");}
</script>
</head>
<body >
欢迎学习JavaScript
</body>
</html>
当用户退出页面时(页面关闭,页面刷新等),触发onunload事件,同时执行调用
的程序。
注意:不同浏览器对onunload事件支持不同。
如下代码,当退出页面时,弹出对话框"您确定离开该网页吗?"
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>onUnload</title>
<script type="text/javascript">
window.onunload=onunload_message;
function onunload_message(){
alert("您确定离开该网页吗?");
}
</script>
</head>
<body>
欢迎学习JavaScript
</body>
</html>
留个题目:
使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。
提示:获取元素的值设置和获取方法为:例:赋值:document.getElementById(“id”).value = 1; 取值:var = document.getElementById(“id”).value;
答案如下:
<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){
//获取第一个输入框的值
var a=parseInt(document.getElementById("txt1").value);
//获取第二个输入框的值
var b=parseInt(document.getElementById("txt2").value);
//获取选择框的值
var c=document.getElementById("select").value;
//获取通过下拉框来选择的值来改变加减乘除的运算法则
var d;
switch(c){
case "+":
d=a+b;
break;
case "-":
d=a-b;
break;
case "*":
d=a*b;
break;
case "/":
d=a/b;
break;
}
//设置结果输入框的值
document.getElementById("fruit").value=d;
}
</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>
什么是对象?JavaScript中的所有事物都是对象,如:字符串、数组、数值、函数
等,每个对象带有属性和方法。
对象的属性:反映该对象某些特定的性质的,如:字符串的长度图像的长宽等;
对象的方法:能够在对象上执行的动作。例如,表单的“提交”(Submit),时间的
“获取”(getYear)等;
JavaScript提供多个内建对象,比如String,Date,Array等等,使用对象前先定义,
如下使用数组对象:
var objectName=new Array();//使用new关键字定义对象
或者
var objectName=[];
访问对象属性的语法:
objectName.propertyName
如使用Array对象的length属性来获得数组的长度:
var myarray=new Array(6);//定义数组对象
var myl=myarray.length;//访问数组长度length属性
以上代码执行后,myl的值为6
访问对象的方法:
objectName.methodName()
如使用string对象的toUpperCase()方法来将文本转换为大写:
var mystr="Hello world!"//创建一个字符串
var request=mystr.toUpperCase();//使用字符串对象方法
以上代码执行后,request的值是:HELLO WORLD!
日期对象可以存储任意一个日期,并且可以精确到毫秒数(1/1000秒)
定义一个时间对象:
var Udate=new Date();
注意:使用关键字new,Date()的首字母必须大写
使Udate称为日起对象,并且已有初始值:当前时间(当前电脑系统时间)
如果要自定义初始值,可以用以下方法:
var d=new Date(2012,10,1);//2012年10月1日
var d=new Date(‘Oct 1,2012‘);//2012年10月1日
我们最好使用下面介绍的方法来严格定义时间。
访问方法语法:"<日期对象>,<方法>"
Date对象中处理时间和日期的常用方法:
方法名称 功能描述
get/setDate() 返回/设置日期
get/setFullYear() 返回/设置年份,用四位数表示
get/setYear() 返回/设置年份
get/setMonth() 返回/设置月份。0:1月...11:12月。所以加一
get/setHours() 返回/设置小时,24小时制
get/setMinutes() 返回/设置分钟数
get/setSeconds() 返回/设置秒钟数
get/setTime() 返回/设置事件(毫秒为单位)
下面来介绍get/setFullYear()返回/设置年份,用四位数表示
var mydate=new Date();//当前事件2014年3月6日
document.write(mydate+"<br>");//输出当前时间
document.write(mydate.getFullYear()+"<br>");//输出当前年份
mydate.setFullYear(81);//设置年份
document.write(mydate+"<br>");//输出年份被设定为0081年
注意:不同浏览器,mydate.setFullYear(81)结果不同,年份被设定为0081或81两种
情况。
结果:
Thu Mar 06 2014 10:57:47 GMT+0800
2014
Thu Mar 06 0081 10:51:47 GMT+0800
注意:
1.结果格式依次为:星期、月、日、年、时、分、秒、时区(火狐浏览器)
2.不同浏览器,时间格式有差异。
返回星期方法:
getDay()返回星期,返回的是0-6的数字,0表示星期天,如果要返回相对应"星期"
通过数组完成,代码如下:
<script type="text/javascript">
var mydate=new Date();//定义日期对象
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星
期六"];//定义数组对象,给每个数组项赋值
var mynum=mydate.getDay();//返回值存储在变量mynum中
document.write(mydate.getDay());//输出getDay()获取值
document.write("今天是:"+weekday[mynum]);//输出星期几
</script>
注意:以上代码是2014年3月7日,星期五运行。
结果:
5
今天是星期五
get/setTime()返回/设置事件,单位毫秒数,计算从1970年1月1日零时到日期对象
所指的日期的毫秒数。
如果将目前对象所指的日期推迟1小时,代码如下:
<script type="text/javascript">
var mydate=new Date();
document.write("当前事件:"+mydate+"<br>");
mydate.setTime(mydate.getTime()+60*60*1000);
document.write("推迟一个小时时间:"+mydate);
</script>
结果:
当前时间:Thu Mar 6 11:46:27 UTC+0800 2014
推迟一个小时时间:Thu Mar 6 12:46:27 UTC+0800 2014
注意:1.一小时60分 一分60秒 一秒1000毫秒
2.时间推迟一小时就是:"x.setTime(x.getTime()+60*60*1000);"