一个容易的联动菜单和定时器

一个简单的联动菜单和定时器

一个简单的联动菜单：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset="utf-8" />
	<title>联动菜单</title>
</head>
<script type="text/javascript">
	var area = [
	['朝阳','海淀','门头沟'],
	['淮南','淮北','合肥']
	];
	function ld(){
		var sel = document.getElementById('prov');
		var opt = '';
		if(sel.value == -1){
			document.getElementById('city').innerHTML = opt;
			return;
		}
		for(var i = 0 ; i < area[sel.value].length ; i++){
			opt = opt + '<option value="' + i + '">'+area[sel.value][i] + '</option>';
			//alert(opt);	
		}
		document.getElementById('city').innerHTML = opt;
	} 
</script>
<body>
	<select name="" id="prov" onchange="ld();">
		<option value="-1">请选择</option>
		<option value="0">北京</option>
		<option value="1">安徽</option>
	</select>
	<select name="" id="city">
		
	</select>
</body>
</html>

演示样子：

一个容易的联动菜单和定时器

定时器：

设置定时器：

window.setTimeout('语句',毫秒); //指定毫秒后执行一次语句。

注：定时器不属于js的知识，它是window对象提供的功能

window.setInterval('语句',毫秒); //每经过N毫秒执行语句。

清除定时器：

window.clearTimeout('定时器名');

window.clearInterval('定时器名');

例子：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html"; charset="utf-8" />
	<title></title>
</head>
<style type="text/css">
	img{
		width: 300px;
		height: 400px;
	}
</style>
<script type="text/javascript">
	
	function beng(){
		
		var inp = document.getElementsByName('time')[0];
		var time = parseInt(inp.value)-1;
		inp.value = time;
		if(time == 0){
			document.getElementsByTagName('img')[0].src = 'image/next.jpg';
		window.clearInterval(clock);
		}
	}

	var clock = window.setInterval('beng()',1000);


</script>
<body>
	<h1>定时器</h1>
	<input type="button" name="time" value="5" /><br/>
	<img src="image/before.jpg" alt="" />
</body>
</html>

演示结果：

一个容易的联动菜单和定时器

一个容易的联动菜单和定时器

相关推荐