前端第二周，Javascript--间隔定时器

setInterval(fn函数,timer定时器)  间隔定时器---计时器

              //在指定的间隔时间反复不断地执行这段JS代码，不规定停止就一直执行。

              //第一个参数：函数 -- 反复不断被执行Js代码——写在函数

              //第二个参数：时间戳(毫秒数) -- 间隔时间

              //返回值：数字，表示的是间隔定时器是页面中第几个执行的，第几个执行的返回值就是数字几  

clearInterval()    停止间隔定时器

            //参数：所要停止的间隔定时器的返回值

 //案例：期望这个定时器在 打印完10之后就停止

        var n = 1;

        var timer1 = setInterval(function () {

            //停止间隔定时器，只是会停止不开启下一次，但是当前这一次会将所有的diamante执行完毕

            // if (n > 10) {

            //     clearInterval(timer1);

            // }

            console.log(n);

            n++;

            if (n > 10) {

                clearInterval(timer1);

            }

        }, 500)//1秒等于1000毫秒

        console.log(timer1);//1

        // 停止打印按钮被鼠标单击时

        stop1.onclick = function () {

            // 停止间隔定时器

            clearInterval(timer1);

        }

如果间隔定时器没有设定间隔时间，则默认的间隔时间最大值2-5ms 

 setInterval(function () {

            //当前时间

            var d1 = new Date();

            console.log(d1);

            //getFullyear()   获取时间对象的年份，返回四位数字

            var year1 = d1.getFullYear();//   当前的年份

            console.log(year1);

            //getMonth()    获取时间对象的月份，返回0-11的数字

            // 因为 0表示1月，1表示2月，.....，11表示12月

            // 所以我们在获取时给结果+1

            var month1 = d1.getMonth() + 1;//   当前的月份

            console.log(month1);

            //getDay()   获取时间对象的日期，返回1-31的数字

            var day1 = d1.getDate();  //   当前的日期

            console.log(day1);

            //getHours()   获取时间对象的小时，返回0-23的数字

            var hour1 = d1.getHours();//   当前的小时

            console.log(hour1);

            //getMinutes    获取时间对象的分钟，返回0-59的数字

            var min1 = d1.getMinutes(); //       当前的分钟

            console.log(min1);

            //getSeconds()  获取时间对象的秒，返回0-59的数字

            var sec1 = d1.getSeconds;   //当前的秒

            console.log(sec1);

            //document.body  表示body标签

            //innerHTML  表示给标签写入内容

            //表示给body标签写入内容

 

            document.body.innerHTML = '现在是' + year1 + '年' + month1 + '月' + day1 + '日 ' + hour1 + ':' +min1 + ':' + sec1;

        }, 1000)

倒计时案列： 

//倒计时：距离2023年10月1日到来那一刻还有多少天多少小时多少分钟多少秒

        setInterval(function () {

            // 当前时间

            var start = new Date();

            console.log(start);

            //未来时间

            var stop = new Date('2023 10 1 0:0:0');

            console.log(stop);

            //计算时间差，处理单位为秒S

            var timer = Math.round((stop.getTime() - start.getTime()) / 1000);

            console.log(timer);

            //多少天   一天有60*60*24===86400秒

            var day = parseInt(timer / 86400);

            console.log(day);

            //多少小时 -- 去除了整天的时长之后余下多少小时  一个小时有：60*60===3600秒

            var hour = parseInt(timer % 86400 / 3600);

            console.log(hour);

            //多少分钟 -- 去除了整 小数的时长之后余下的多少分钟 -- 一分钟有60秒

            var min = parseInt(timer % 3600 / 60);

            console.log(min);

            //多少秒

            var sec = timer % 60;

            console.log(sec);

            document.body.innerHTML = '距离2023年国庆还有' + day + '天' + doubleNum(hour) + ':' + doubleNum(min) + ':' + doubleNum(sec);

        }, 1000)

 setTimeout(fn,timer)    延时定时器---延时器

              //在指定的演示等待时间之后执行一段Js代码，代码只会执行一次。

              //第一个参数：函数 --演示等待时间之后执行的代码写在函数中。

              //第二个参数：时间戳(毫秒数) --- 延时等待的时间

              //返回值：数字，表示的时间隔定时器是页面中的第几个执行的，第几个执行返回值就是几

clearItemout()    停止延时定时器

        //参数：所要停止的延时定时器的返回值

举个栗子：

 var timer = setTimeout(function () {

            console.log(10);

        }, 2000);

        console.log(timer);//1

 

        //stop元素被鼠标单击时

        stop.onclick = function () {

            clearTimeout(timer);

        }