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

js setInterval 与 setTimeout

2016-11-24 13:00 309 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<script>
//用途：setInterval()循环定时器；周而复始的执行（循环执行）
//用途：setTimeout() 炸弹定时器；用完以后立刻报废（只执行一次）

//定义定时器的三种方法
setInterval(function () { //定义方法1(匿名函数)
console.log(1);
},1000);

setInterval(fn,1000); //定义方法2
function fn(){
console.log(2);
}

setInterval("fn(3)",1000); //定义方法3
function fn(aaa){
console.log(aaa);
}

//定时器的清楚
var num = 1; //返回值，清除定时器。
var timer = setInterval(function () {  //setInterval他的返回值就是定时器的名字
console.log(num);
num++
if(num===10){
//如何停止定时器呢？？？
clearInterval(timer);
}
},500);

//setInterval 定时器
//需求：点击关闭按钮，先让top-banner这个盒子透明度变为0，紧接着display：none;
var topBaner = document.getElementsByClassName("top-banner")[0];
var a = topBaner.children[0].firstElementChild || topBaner.children[0].firstChild ;
//定义定时器
var timer = null;
//2.绑定事件
a.onclick = function () {
//3.书写事件驱动程序（定时器，透明度变为0，清除定时器，并隐藏盒子）
timer = setInterval(function () {
topBaner.style.opacity -= 0.1;
if(topBaner.style.opacity<0){
topBaner.style.display = "none";
clearInterval(timer);
}
},50);
}

//setTimeout 定时器
//需求5秒后关闭广告栏
window.onload = function () {
//获取相关元素
var imgArr = document.getElementsByTagName("img");
//设置定时器
setTimeout(fn,5000);
function fn(){
imgArr[0].style.display = "none";
imgArr[1].style.display = "none";
}
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航