倒计时与未来某个时间点相差多长时间

第一步：获取系统当前时间

HTML：

<button class="time-button public_button">
    距离开售 <span class="hours">21</span> :
    <span class="minutes">00</span> :
    <span class="seconds">56</span>
</button>

//获取当前时间

    function getTime(){

        let data = new Date()

        let y = data.getFullYear() //年

        let m = (data.getMonth() + 1) < 10 ? '0' + (data.getMonth() + 1) : (data.getMonth() + 1) //月

        let d = data.getDate() < 10 ? '0' + data.getDate() : data.getDate() //日

        let h = data.getHours() < 10 ? '0' + data.getHours() : data.getHours() //时

        let mm = data.getMinutes() < 10 ? '0' + data.getMinutes() : data.getMinutes() //分

        let s = data.getSeconds() < 10 ? '0' + data.getSeconds() : data.getSeconds() //秒

        let data1 = `${y}/${m}/${d} ${h}:${mm}:${s}`    //当前时间 格式：2022/09/08 09:09:09

        let data2 = '2022/09/28 17:30:00'      //未来时间

        //这里返回两个参数  一个当前的系统时间  一个 未来的时间

        return{

            data1, //当前时间

            data2 //未来时间

        }

    }

let m = (data.getMonth() + 1) < 10 ? '0' + (data.getMonth() + 1) : (data.getMonth() + 1) //看不懂这种写法的，可以理解为 小于10的 前面加个0拼接上去 例如系统默认是(2000/9/9) 而这种写法最终格式（2022/09/09）

第二步：获取dom的类，也就是渲染的倒计时模块

//获取倒计时的类

    let class_hours = document.querySelector('.hours')

    let class_minutes = document.querySelector('.minutes')

    let class_seconds = document.querySelector('.seconds')

第三步：计算时间 也就是：未来时间 - 当前时间 = 中间相差多长时间

//使用毫秒转换时分秒

    function formatDuring(){

        //时间转换并取得毫秒

        let dayTime = new Date(getTime().data1)

        let future = new Date(getTime().data2)

        //取得毫秒

        let mss = parseInt(future - dayTime)

        // console.log('ss：',parseInt(future - dayTime))

        //毫秒转 天时分秒

        let day = parseInt(mss / (1000*60*60*24))  //天数

        let hours = parseInt((mss % (1000*60*60*24)) / (1000*60*60))  //小时

        let minutes = parseInt((mss % (1000*60*60)) / (1000*60))  //分钟

        let seconds = parseInt(mss % (1000*60)) / 1000  //秒

        //天数大于0  则 天*24 取得小时 并与今日小时相加

        if(day > 0){

            hours += (day * 24)

        }

        //渲染到页面

        class_hours.innerHTML = `${hours < 10 ? '0' + hours : hours}`

        class_minutes.innerHTML = `${minutes < 10 ? '0' + minutes : minutes}`

        class_seconds.innerHTML = `${seconds < 10 ? '0' + seconds : seconds}`

        let time = `${hours}:${minutes}:${seconds}`

        //判断时间是否到时

        if(hours <= 0 && minutes <= 0 && seconds <= 0){

            time = 0

        }

        return time

    }

第四步：获取按钮元素

//获取按钮元素

    let time_button = document.querySelector('.time-button')    //倒计时按钮

第五步：启用定时器开始倒计时

//开始倒计时

    let timeVal = setInterval(()=>{

        // let time = `${hours}:${minutes}:${seconds}`

        //这里如果 return给的0代表时间已经走完

        if(formatDuring() <= 0){

            console.log("12",formatDuring())

            //倒计时走完则清除倒计时按钮

            time_button.remove()

            clearInterval(timeVal)

        }

    },1000)

第六步：查看效果，mp4转gif有点浑 自己看大致效果吧

当前时间（2022/09/28 14:06:xx） - 未来时间（2022/09/28 14:07:00） = 下方效果图

let data1 = `${y}/${m}/${d} ${h}:${mm}:${s}`    //当前时间

    let data2 = '2022/09/28 14:07:00'      //未来时间

QQ录屏20220928140705.gif

最后一点 不知道的怎么写的话 可以直接复制下面的代码 然后样式稍作修改就行了。

这里只需要找到未来时间 修改未来时间就行了 未来时间（let data2 = '2022/09/28 14:20:00'）修改这个就行
在运行之前先修改未来时间 不然看着是无效果的

<button class="time-button public_button">

    距离开售 <span class="hours">21</span> :

    <span class="minutes">00</span> :

    <span class="seconds">56</span>

</button>

<script>

    //获取当前时间

    function getTime(){

        let data = new Date()

        let y = data.getFullYear() //年

        let m = (data.getMonth() + 1) < 10 ? '0' + (data.getMonth() + 1) : (data.getMonth() + 1) //月

        let d = data.getDate() < 10 ? '0' + data.getDate() : data.getDate() //日

        let h = data.getHours() < 10 ? '0' + data.getHours() : data.getHours() //时

        let mm = data.getMinutes() < 10 ? '0' + data.getMinutes() : data.getMinutes() //分

        let s = data.getSeconds() < 10 ? '0' + data.getSeconds() : data.getSeconds() //秒

        let data1 = `${y}/${m}/${d} ${h}:${mm}:${s}`    //当前时间 格式：2022/09/08 09:09:09

        let data2 = '2022/09/28 14:20:00'      //未来时间

        //这里返回两个参数  一个当前的系统时间  一个 未来的时间

        return{

            data1, //当前时间

            data2 //未来时间

        }

    }

    //获取倒计时的类

    let class_hours = document.querySelector('.hours')

    let class_minutes = document.querySelector('.minutes')

    let class_seconds = document.querySelector('.seconds')

    //使用毫秒转换时分秒

    function formatDuring(){

        //时间转换并取得毫秒

        let dayTime = new Date(getTime().data1)

        let future = new Date(getTime().data2)

        //取得毫秒

        let mss = parseInt(future - dayTime)

        // console.log('ss：',parseInt(future - dayTime))

        //毫秒转 天时分秒

        let day = parseInt(mss / (1000*60*60*24))  //天数

        let hours = parseInt((mss % (1000*60*60*24)) / (1000*60*60))  //小时

        let minutes = parseInt((mss % (1000*60*60)) / (1000*60))  //分钟

        let seconds = parseInt(mss % (1000*60)) / 1000  //秒

        //天数大于0  则 天*24 取得小时 并与今日小时相加

        if(day > 0){

            hours += (day * 24)

        }

        //渲染到页面

        class_hours.innerHTML = `${hours < 10 ? '0' + hours : hours}`

        class_minutes.innerHTML = `${minutes < 10 ? '0' + minutes : minutes}`

        class_seconds.innerHTML = `${seconds < 10 ? '0' + seconds : seconds}`

        let time = `${hours}:${minutes}:${seconds}`

        //判断时间是否到时

        if(hours <= 0 && minutes <= 0 && seconds <= 0){

            time = 0

        }

        return time

    }

    //获取按钮元素

    let time_button = document.querySelector('.time-button')    //倒计时按钮

    //开始倒计时

    let timeVal = setInterval(()=>{

        // let time = `${hours}:${minutes}:${seconds}`

        //这里如果 return给的0代表时间已经走完

        if(formatDuring() <= 0){

            console.log("12",formatDuring())

            //倒计时走完则清除倒计时按钮

            time_button.remove()

            clearInterval(timeVal)

        }

    },1000)
</script>