根据系统时间实现5分钟倒计时

一、Date日期对象

Date()日期对象 是一个构造函数，必须使用new 来调用创建我们的日期对象使用Date日期对象的时候，如果里面没有放置参数，那么返回的就是系统的当前时间

常用方法	说明
getFullYear()	返回当前日期的年份
getMonth()	返回当前日期的月份 但是返回值是在0-11，我们需要在获取到的月份上 进行+1的操作
getDate()	返回的是当前日期的天数，也就是今天是几号
getDay()	返回的是今天是星期几 周一返回的是1，周六返回的是6 但是周日返回的是0
getHours()	返回的是当前的小时
getMinutes()	返回的是当前的分钟数
getSeconds()	返回的是当前的秒数
getTime()	获取毫秒数
setFullYear()	为指定日期设置年
setDate()	设置指定的日期
setHours()	设置指定日期设置小时
setMinutes()	设置指定日期的分钟数
setSeconds()	设置指定日期的秒数

二 需求

在项目中遇到一个倒计时，他要根据系统时间，按00：00，00：05，00：10这样的规律每隔5分钟进行倒计时

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/764a35645daf4afcbda0528c83a6f36a.png#pic_center

倒计时

思路：

1. 拿到当前时间的秒数，用seconds初始值减去当前时间的秒数 == 就会得到剩余时间的秒数
2. 拿到当前时间的分钟（0-60） 然后用%求当前分钟的个位数，如果个位数大于5 minute = 10 - minute - 1;
   如果小于5minute = 4;

        var seconds = 60; // 设置秒数的初始值
        const date = new Date(); // 拿到当前时间
        var minutes = date.getMinutes(); //拿到当前时间的分钟
        // 取当前分钟的个位数
        var minute = minutes % 10;   // 求余
            if (minute >= 5) {   // 比如 minutes = 46 取余之后 minute= 6 
                minute = 10 - minute - 1;         // minute = 10 - 6 - 1  = 3  后面再减去1 秒数初始值是60秒等于1分钟
            } else if (minute == 0) {  // 等于0 表示上一个倒计时刚好结束
                minute = 4;   // 这个分钟就可以设置为初始值 4 ，秒数 60 
            } else {
                minute = Math.abs(5 - minute - 1); 
            }
            var s = date.getSeconds(); // 获取当前的秒数
            seconds = seconds - s; // 初始值60 减去当前的秒数

三 完整代码

 countdown() {
            const timeHtml = document.querySelector('.main-tips-time');
            var seconds = 60;
            const date = new Date();
            var minutes = date.getMinutes();
            // 取当前分钟的个位数
            var minute = minutes % 10;
            if (minute >= 5) {
                minute = 10 - minute - 1;
            } else if (minute == 0) {
                minute = 4;
            } else {
                minute = Math.abs(5 - minute - 1);
            }
            var s = date.getSeconds();
            seconds = seconds - s;
            var timer = setInterval(() => {
                // 如果上一次秒是‘00’=> 04:00 本次直接为03:59
                if (seconds == '00' && minute > 0) {
                    seconds = 59;
                    minute--;
                } else {
                    seconds--;
                }
                if (seconds >= 0 && seconds < 10) {
                    seconds = '0' + Number(seconds);
                }
                if (minute >= 0 && minute < 10) {
                    minute = '0' + Number(minute);
                }
                if (timeHtml) {
                    timeHtml.innerHTML = minute + ':' + seconds;
                }
                if (minute == 0 && seconds == 0) {
                    clearInterval(timer);
                    this.countdown();
                    this.getRankingList();
                }
            }, 1000);
        }

setTimeOut与setInterval的区别是什么？

setTimeout 和 setInterval 都是 JavaScript 中用来调度执行代码的函数，它们之间的主要区别在于执行频率和用途上。

1 setTimeout:

setTimeout 函数用于在指定的延迟时间后执行一次指定的函数或者一段代码。
语法：

setTimeout(function, delay);

其中 function 是要执行的函数或者代码块，delay 是延迟的毫秒数。
示例：

setTimeout(() => {
  console.log('This will be logged after 1000ms');
}, 1000);

2 setInterval:

setInterval 函数用于按照指定的时间间隔重复执行指定的函数或者一段代码。
语法：

setInterval(function, interval);

其中 function 是要重复执行的函数或者代码块，interval 是执行之间的时间间隔，以毫秒为单位。
示例：

setInterval(() => {
  console.log('This will be logged every 2000ms');
}, 2000);

setInterval 会按照设定的时间间隔重复执行指定的代码，直到被清除或者页面被关闭。

总结:
setTimeout 用于在指定的延迟后执行一次代码。
setInterval 用于重复执行代码，每隔指定的时间间隔执行一次。
在实际使用中，需要根据具体的需求选择合适的函数。如果需要重复执行某段代码，可以使用 setInterval；如果只需要执行一次，可以使用 setTimeout。