js setInterval 与 setTimeout

来源：互联网发布：ubuntu镜像文件安装编辑：程序博客网时间：2024/06/04 19:02
<!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>
0 0