javascript定时器 setInterval() setTimeout()

2019年12月9日00:53:33 评论 110 次浏览

4.1、介绍和语法

定时器可以完成定时作用,可以让一段代码延迟一段时间然后再执行。
很多地方都会用到定时器,比如用JS写一个会走的钟表;比如轮播图;
JS定时器有两种:

  1. 指定一段时间,然后在该时间段之后只执行一次代码,特点是只执行一次。
  2. 指定一段时间,然后每隔一段时间执行一次代码,也就是间隔一段时间执行一次,一直重复。

具体方法如下:

setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。

setTimeout() 在指定的毫秒数后调用函数或计算表达式。

setTimeout(JS代码或函数,  毫秒数);
setInterval (JS代码或函数,  毫秒数);
<script>
    /** 用法一:直接写一行js ***/
   setTimeout('alert(123)', 2000); //表示2 秒后,弹出窗口

    /**用法二:执行函数 **/
    setTimeout(function(){
        console.log(123);
        console.log(456);
    }, 2000);//表示2 秒后执行一次函数

    /** 用法三:先定义好函数,然后在执行定时器 **/
    //先定义函数,然后在调用定时器
    function m(){
        console.log(789);
        console.log('10LQ');
    }
    setTimeout(m, 2000); //表示2 秒后执行m函数 调用函数不加()

    /** 用法四:先定义好函数,然后在执行定时器 **/
    //先定义函数,然后在调用定时器
    function m() {
        console.log(789);
        console.log('10LQ');
    }
    setTimeout('m()', 2000);//函数名当初参数 字符串

setInterval() 语法上和setTimeout一样。

4.2、会走的时间

思路是写一个能够输出当前时间的函数,页面加载完毕马上执行一次,然后在用定时器每隔1秒执行一次函数即可。
HTML代码:
javascript定时器  setInterval() setTimeout()
下面是检测数字是否小于10的函数:
javascript定时器  setInterval() setTimeout()
下面定义制作时间的函数,然后马上调用一次,这样刷新页面就能够看到时间了:
javascript定时器  setInterval() setTimeout()

使用定时器,让制作时间的函数每隔一秒执行一次:
javascript定时器  setInterval() setTimeout()

<div id="clock"></div>

<script>
    //写一个函数,检测数字是否小于10,如果小于10,则前面加一个0
    function check(n){
        if(n < 10){
            n = '0'+ n; //字符串和数字相连,会将数字转换为字符串,然后相连
        }
        return n;
    }

    //定义制作时间的函数
    function t(){
        //制作时间
        var d = new Date();
        var year = d.getFullYear();
        var month = check(d.getMonth()+1);
        var day = check(d.getDate());
        var hour = check(d.getHours());
        var minute = check(d.getMinutes());
        var second = check(d.getSeconds());
        //组合
        var s = year+'年'+month+'月'+day+'日 '+hour+':'+minute+':'+second;
        document.getElementById('clock').innerText = s;
    }
    t(); //上来先运行一次函数,显示一次时间

    setInterval(t, 1000); //每隔1秒执行一次函数
</script>

4.3、终止定时器

对应的终止定时器的方法分别是:

clearInterval(定时器计数);

clearTimeout(定时器计数);

参数“定时器计数”指的是定时器的返回值。
javascript定时器  setInterval() setTimeout()

    var t = setTimeout(function(){
        console.log(123);
    }, 5000);

    //console.log('t' + t);

    var t2 = setTimeout(function () {
        console.log(456);
    }, 5000);
    //console.log('t2' + t2);

    clearTimeout(t2);

4、修改会走的时间

加入两个按钮,一个表示停止,一个表示继续。
HTML加入两个按钮:
javascript定时器  setInterval() setTimeout()
JS代码给“停止”和“继续”绑定单击事件:
javascript定时器  setInterval() setTimeout()
优化上述代码:
首先将按钮换成一个:
javascript定时器  setInterval() setTimeout()
JS代码:
javascript定时器  setInterval() setTimeout()

<div id="clock"></div>
<input type="button" value="停止" id="stop" />
<input type="button" value="继续" id="jixu" />

<script>
    //写一个函数,检测数字是否小于10,如果小于10,则前面加一个0
    function check(n){
        if(n < 10){
            n = '0'+ n; //字符串和数字相连,会将数字转换为字符串,然后相连
        }
        return n;
    }

    //定义制作时间的函数
    function t(){
        //制作时间
        var d = new Date();
        var year = d.getFullYear();
        var month = check(d.getMonth()+1);
        var day = check(d.getDate());
        var hour = check(d.getHours());
        var minute = check(d.getMinutes());
        var second = check(d.getSeconds());
        //组合
        var s = year+'年'+month+'月'+day+'日 '+hour+':'+minute+':'+second;
        document.getElementById('clock').innerText = s;
    }
    t(); //上来先运行一次函数,显示一次时间

    var flag = true; //标志为true,表示不允许继续
    var x = setInterval(t, 1000); //每隔1秒执行一次函数
    console.log('开始的x值为:' + x);

    //给停止按钮加入单击事件
    document.getElementById('stop').onclick = function () {
        clearInterval(x);
        console.log('清除的是:' + x);
        flag = false;
    };
    //继续
    document.getElementById('jixu').onclick = function () {
        //
        if(flag){
            return false;
        }
        flag = true; //重置为true,目的是不让一直点击继续
        x = setInterval(t, 1000);
        console.log('点击继续时x的值是:' + x);
    };
</script>

<div id="clock"></div>
<input type="button" value="停止" id="qiehuan" />

<script>
    //写一个函数,检测数字是否小于10,如果小于10,则前面加一个0
    function check(n){
        if(n < 10){
            n = '0'+ n; //字符串和数字相连,会将数字转换为字符串,然后相连
        }
        return n;
    }

    //定义制作时间的函数
    function t(){
        //制作时间
        var d = new Date();
        var year = d.getFullYear();
        var month = check(d.getMonth()+1);
        var day = check(d.getDate());
        var hour = check(d.getHours());
        var minute = check(d.getMinutes());
        var second = check(d.getSeconds());
        //组合
        var s = year+'年'+month+'月'+day+'日 '+hour+':'+minute+':'+second;
        document.getElementById('clock').innerText = s;
    }
    t(); //上来先运行一次函数,显示一次时间

    var flag = true;
    var x = setInterval(t, 1000); //每隔1秒执行一次函数

    document.getElementById('qiehuan').onclick = function () {
        if(flag){
            this.value = '继续';
            clearInterval(x);
            flag = false;
        }else{
            this.value = '停止';
            x = setInterval(t, 1000);
            flag = true;
        }
    }
</script>

4.3图片淡入淡出切换效果

1、默认的HTML和css

  *{
            margin:0;
            padding:0;
            border:0 none;
        }
        div{
            width:600px;
            height:400px;
            margin:10px auto;
            position: relative;
        }
        img{
            position: absolute;
            left:0;
            top:0;
            z-index: 1;//所有图片全部都为一个上下层级
        }
        img:first-child{
            z-index: 3;//让第一个图片的层级较高,就可以默认显示第一个了;如果不设置,默认显示是最后一个图片
            /*opacity: 0.5;*/
        }
<div>
    <img src="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
    <img src="images/3.jpg" alt="">
    <img src="images/4.jpg" alt="">
    <img src="images/5.jpg" alt="">
    <img src="images/6.jpg" alt="">
</div>

2、JS完成图片生硬的变化

思路是用一个定时器不断的去切换图片的显示和隐藏。每切换一次,都让图片的下标增大1,但是不能超出范围。

var imgs = document.getElementsByTagName('img'); //返回数组
    var outIndex = 0; //默认第一张图片先应该隐藏
    var inIndex = 1; //默认第二张图片先显示
    //先完成生硬的变化
    setInterval(function(){
        //判断outIndex和inIndex不要超出范围
        if(outIndex >= 6){
            outIndex = 0;
        }
        if(inIndex >= 6){
            inIndex = 0;
        }
        imgs[outIndex].style.zIndex = 2;
        imgs[inIndex].style.zIndex = 3;
        change(imgs[inIndex]); //调用下面的函数,传递进去要显示的图片
        outIndex++;
        inIndex++;
    }, 4000);

3、完成透明度的慢慢变化

javascript定时器  setInterval() setTimeout()

全部js代码

  var imgs = document.getElementsByTagName('img'); //返回数组
    var outIndex = 0; //默认第一张图片先应该隐藏
    var inIndex = 1; //默认第二张图片先显示
    //先完成生硬的变化
    setInterval(function(){
        //判断outIndex和inIndex不要超出范围
        if(outIndex >= 6){
            outIndex = 0;
        }
        if(inIndex >= 6){
            inIndex = 0;
        }
        imgs[outIndex].style.zIndex = 2;
        imgs[inIndex].style.zIndex = 3;
        change(imgs[inIndex]); //调用下面的函数,传递进去要显示的图片
        outIndex++;
        inIndex++;
    }, 4000);

    //自定义函数,完成透明度慢慢变化的过程
    function change(ele){
        //先让图片的透明度置为0
        ele.style.opacity = 0;
        //让图片的透明度慢慢变化到1
        //希望通过1秒钟将透明度从0变化到1
        //0~0.05~0.1~0.15~0.2.......~1 共变化了20次
        for(var i=1; i<=20; i++){ //每次循环表示透明度变化一次,共变化20次,每次增加0.05
            (function(x){
                setTimeout(function(){
                    ele.style.opacity = 0.05*x;
                    if(x == 20){
                        //设置原来的图片zIndex为1
                        //这行代码是延迟1秒才执行的,此时outIndex已经变大了,所以此处需要-
                        imgs[outIndex-1].style.zIndex = 1;
                    }
                }, 50*x); //每隔50毫秒变化一次,共变化20次,用时1000毫秒(1秒)
            })(i);
        }
    }
继续阅读
weinxin
加我微信
微信扫一扫,加我微信好友,共同交流,共同进步! (备注:焦国强博客)
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: