效果图
    image.png

    1. <div>
    2.   <div>
    3.     请输入到期时间：<input id="ipt" type="text" value="2022-07-29 17:56:00">
    4.     <button>开始计时</button>
    5.   </div>
    6.   <div>
    7.     剩余时间：
    8.     <span class="day">00天</span>
    9.     <span class="hour">00小时</span>
    10.     <span class="minute">00分钟</span>
    11.     <span class="second">00秒</span>
    12.   </div>
    13. </div>
    1. // 获取元素
    2. let day = document.querySelector('.day')
    3. let hour = document.querySelector('.hour');
    4. let minute = document.querySelector('.minute');
    5. let second = document.querySelector('.second');
    6. let btn = document.querySelector('button')
    7. let ipt = document.querySelector('input')
    9. btn.addEventListener('click', () => {
    10.     console.log("输入框中的值为：", ipt.value)
    11.     let iptVal = ipt.value
    12.     // 设置到期时间
    13.     let timing = new Date(iptVal)
    15.     setInterval(() => {
    16.         countDown(timing)
    17.     }, 1000)
    18. })
    21. function countDown(time) {
    22.     // 当前时间
    23.     let nowTime = new Date()
    24.     if (time < nowTime) {
    25.         clearInterval(timer)
    26.         return false
    27.     }
    28.     // 得到剩余时间 秒
    29.     let timeRemaining = (time - nowTime) / 1000
    30.     // 得到天数
    31.     let d = Math.floor(timeRemaining / 60 / 60 / 24)
    32.     d = d < 10 ? "0" + d : d
    33.     day.innerHTML = d + "天"
    34.     // 计算小时
    35.     let h = Math.floor(timeRemaining / 60 / 60 % 24)
    36.     h = h < 10 ? "0" + h : h
    37.     // 追加到页面中
    38.     hour.innerHTML = h + "小时"
    39.     // 计算分钟
    40.     let min = Math.floor(timeRemaining / 60 % 60)
    41.     minute.innerHTML = min + "分"
    42.     // 计算秒
    43.     let sec = Math.floor(timeRemaining % 60)
    44.     second.innerHTML = sec + "秒"
    45. }