常用JavaScript对象（二）

一.event 对象：

对象标签属性：

1.onchange 该属性仅适用于 textarea input select 标签中当改变标签的内容时该标签属性包含的js字段执行。

2.onclick 该属性时当鼠标点击某个含有该标签属性的字符或者区域时该标签的onclick内含的js执行。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			function test(){
				var obj=document.getElementById("div");
				obj.style.background="greenyellow";
			}
		</script>
	</head>
	<body>
		<div id="div" style="background: black;width: 100px;height: 100px;" onclick="test()">
			
		</div>
	</body>
</html>
//此为点击一下将该div的颜色改变

3. onfocus onblur 当获得焦点或失去焦点时触发（常用于文本框中）

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			function test(){
				var obj1=document.getElementById("input1");
				obj1.style.background="greenyellow";
				var obj2=document.getElementById("input2");
				obj2.style.background="burlywood";
			}
		</script>
	</head>
	<body>
		<input  id="input1" onblur="test()" />
		<input  id="input2" onfocus="test()"/>
	</body>
</html>
//此为失去焦点和获得焦点时改变input的背景颜色

4.onkeydown onkeyup 当键盘的按键被按下或抬起时触发（常用于文本框中）将上边3的示例代码修改即可使用

5.onload 当图片等被加载完成后事件发生

以下为在网上找的示例代码

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>菜鸟教程(runoob.com)</title>
		<script>
		function loadImage(){
			alert("图片加载完成");
		}
		</script>
	</head>
	<body>

		<img src="logo.png" onload="loadImage()" width="336" height="36">

	</body>
</html>

6.onmousedown onmouseup onmousemove onmouseout onmouseover 这五个事件可以归为一类都是与鼠标相关的是当鼠标的按键按下当鼠标的按键抬起当鼠标在事件作用的区域内移动当鼠标移动出事件作用的区域当鼠标移动到鼠标作用的区域时起作用执行相应的js。

二.Date 对象方法（在js中使用一般用于时间的显示）

先用一段示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			function test(){
					var obj=document.getElementsByTagName("span")[0];
					var date=new Date();
					var year=date.getFullYear();
					var month=date.getMonth();
					var day=date.getDate();
					var dat=date.getDay();
					var hour=date.getHours();
					var minutes=date.getMinutes();
					var second=date.getSeconds();
					obj.innerHTML=year+"."+month+"."+day+"."+"
"+hour+":"+minutes+":"+second;
				}
			function intev(){
				setInterval("test()",1000);
			}
		</script>
	</head>
	<body onload="intev()">
		<span>/span>
	</body>
</html>

以上代码是实现时间实时获取的一段代码

date对象里有以下常用的一些方法：getFullYear() getMonth() getDate()——获取星期星期日为0 星期一为1依次递推 getDay()获得当天的日期 getHours() getMinutes() getSeconds() 见名知意。

还有一些尚未接触先不叙述。

常用JavaScript对象（二）

猜你喜欢