您的位置：首页 > Web前端 > JavaScript

JS学习笔记（03）——(联动菜单,计时器)

2015-11-04 04:20 681 查看

联动菜单

1.选择select时，如何触发，哪种时间？onchange

2.如何获取被选中的option的值？selectobj.value

3.动态生成option innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var area = [
['朝阳',  '海淀', '门头沟'],
['淮南', '淮北' , '合肥']
];
function ld(){
var sel = document.getElementById('prov');
var opt = ' ';

if(sel.value == -1){
var cs = document.getElementById('city').innerHTML = opt; //opt 还是为0，然后返回
return;
}

for (var i=0, len = area[sel.value].length; i < len;i++){
opt = opt + '<option value=" ' + i + ' ">' + area[sel.value][i] + '</option>';
}
// alert(opt);
if(sel != -1){
var cs = document.getElementById('city').innerHTML = opt; //innerHTML表示该父节点下的所有东西

}

}
</script>
</head>
<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>


定时器

windows.setTimeout(‘语句’,毫秒):指定毫秒后执行一次语句

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function bang(){
document.getElementsByTagName("img")[0].src = 'bang.jpg';
}

setTimeout( 'bang() ', 3000); // 3s后执行bang();

</script>
</head>
<body>
<h1>定时器</h1>
<img src="bom.jpg" alt="">
</body>
</html>


修改以上程序，增加倒计时效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function bang(){
var inp = document.getElementsByName("time")[0];
var time = parseInt(inp.value) - 1; // 返回的值是字符，不带双引号
inp.value = time ;
if (time == 0) {
document.getElementsByTagName("img")[0].src = 'bang.jpg';
};

}

// setTimeout( 'bang() ', 3000); // 3s后执行bang();
setInterval('bang() ', 1000); // 每间隔一秒执行一次bang()

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


清除定时器

1.clearInterval()

2.clearTimeout()

修改上述程序，使炸弹爆炸后不再倒计时

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function bang(){
var inp = document.getElementsByName("time")[0];
var time = parseInt(inp.value) - 1; // 返回的值是字符，不带双引号
inp.value = time ;
if (time == 0) {
document.getElementsByTagName("img")[0].src = 'bang.jpg';
clearInterval(clock);  // 清除定时器
};

}

// setTimeout( 'bang() ', 3000); // 3s后执行bang();
var clock = setInterval('bang() ', 1000); // 每间隔一秒执行一次bang(), 并把该定时器的返回值付给变量

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


用
setTimeout()
实现每隔n秒执行一次

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var clock = null;

function bang(){
var inp = document.getElementsByName("time")[0];
var time = parseInt(inp.value) - 1; // 返回的值是字符，不带双引号
inp.value = time ;
if (time == 0) {
document.getElementsByTagName("img")[0].src = 'bang.jpg';
clearInterval(clock);  // 清除定时器
}else{
setTimeout('bang()', 1000);
}
}

// setTimeout( 'bang() ', 3000); // 3s后执行bang();
var clock = setTimeout('bang() ', 1000);

</script>
</head>
<body>
<h1>用`setTimeout()`实现每隔n秒执行一次</h1>
<input type = "button" name = "time" value="5"><br />
<img src="bom.jpg" alt="">
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航