JavaScript实现倒计时功能（包括天时分秒）

CSS样式

• 简单的样式

span {
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: black;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      color: white;
    }

html代码

• 四个用来存放 天-时-分-秒的span

  <span class="day">0</span>
  <span class="hour">1</span>
  <span class="minute">2</span>
  <span class="second">3</span>

JavaScript代码

*注释写在每行代码后面

    var day = document.querySelector('.day'); //天数的黑色盒子
    var hour = document.querySelector('.hour'); //小时的黑色盒子
    var minute = document.querySelector('.minute'); //分钟的黑色盒子
    var second = document.querySelector('.second'); //秒数的黑色盒子
    var inputTime = +new Date('2020-5-4 19:00:00'); //返回用户输入时间总的毫秒数
    countDown(); //先调用一次函数防止第一次刷新页面有空白
    setInterval(countDown, 1000); //调用函数

    function countDown(time) {
      var nowTime = +new Date(); //返回当前时间总的毫秒数
      var times = (inputTime - nowTime) / 1000; //times是剩余时间总的毫秒数

      var d = parseInt(times / 60 / 60 / 24); //天
      d = d < 10 ? '0' + d : d;
      day.innerHTML = d; //把剩余的天数给天数盒子

      var h = parseInt(times / 60 / 60 % 24); //时
      h = h < 10 ? '0' + h : h;
      hour.innerHTML = h; //把剩余的小时给小时盒子

      var m = parseInt(times / 60 % 60); //分
      m = m < 10 ? '0' + m : m;
      minute.innerHTML = m; //把剩余的分钟给分钟盒子

      var s = parseInt(times % 60); //秒
      s = s < 10 ? '0' + s : s;
      second.innerHTML = s; //把剩余的秒数给秒数盒子
    }

效果图