Js 之时间倒计时

一、效果图

 二、代码

    <h1>Countdown Clockh1>
<div id="clockdiv">
  <div>
    <span class="days">00span>
    <div class="smalltext">Daysdiv>
  div>
  <div>
    <span class="hours">00span>
    <div class="smalltext">Hoursdiv>
  div>
  <div>
    <span class="minutes">00span>
    <div class="smalltext">Minutesdiv>
  div>
  <div>
    <span class="seconds">00span>
    <div class="smalltext">Secondsdiv>
  div>
div>
<script type="text/javascript">
let ut = {};
const countDown = function(time, fn) {
    let maxtime = time - new Date().getTime(), //剩余秒
    timer = setInterval(function() {
        if (maxtime >= 0) {
            const dd = parseInt(maxtime / 60 / 60 / 24, 10), //计算剩余的天数  
            hh = (Array(2).join(0) + parseInt(maxtime / 60 / 60 % 24, 10)).slice(-2), //计算剩余的小时数  
            mm = (Array(2).join(0) + parseInt(maxtime / 60 % 60, 10)).slice(-2), //计算剩余的分钟数  
            ss = (Array(2).join(0) + parseInt(maxtime % 60, 10)).slice(-2); //计算剩余的秒数  

            fn({dd, hh, mm, ss});
            --maxtime;
        } else {
            clearInterval(timer)
            fn({})
        }
    }, 1000)
},
showtime = function(time) 
{
    const clock = document.getElementById("clockdiv"),
    daysSpan = clock.querySelector('.days'),
    hoursSpan = clock.querySelector('.hours'),
    minutesSpan = clock.querySelector('.minutes'),
    secondsSpan = clock.querySelector('.seconds');

    if(undefined === time.ss) {
        clock.innerHTML = '结束了';
        return false;
    }
    
    if(undefined === ut.dd || time.dd !== ut.dd) daysSpan.innerHTML = time.dd;
    if(undefined === ut.hh || time.hh !== ut.hh) hoursSpan.innerHTML = time.hh;
    if(undefined === ut.mm || time.mm !== ut.mm) minutesSpan.innerHTML = time.mm;
    secondsSpan.innerHTML = time.ss;
    ut = time;
};

countDown(new Date().getTime() + 60 * 60 * 24 * 10, showtime);
script>