当前位置: 博客 /  JavaScript  / JavaScript实现时间倒计时计算以及显示

JavaScript实现时间倒计时计算以及显示

效果

见本站页脚:

本站已运行了 xxx 天 xx 时 xx 分 xx 秒

完整代码

  1. 在显示倒计时的地方加入HTML代码,可自定义样式
  2. 加入JavaScript代码

HTML:

本站已运行了 <span id="Clock"></span>

JavaScript:

<script type="text/javascript">
  function format(v) {
    return v < 10 ? "0" + v : "" + v
  }

  function tick() {
    var days, hours, minutes, seconds;
    var startDay = new Date('2018/06/14 00:00');  //此处修改为你的起始时间
    var today = new Date();
    var total = (today.getTime()-startDay.getTime())/1000;
    days=Math.floor(total/86400);
    total=total-days*86400;
    hours=format(Math.floor(total/3600));
    total=total-hours*3600;
    minutes=format(Math.floor(total/60));
    total=total-minutes*60;
    seconds=format(Math.floor(total));
    timeString = days +" 天 "+ hours +" 时 "+ minutes + " 分 "+ seconds + " 秒 ";
    document.getElementById("Clock").innerHTML = timeString;
    window.setTimeout("tick();", 1000);
  }
  window.onload = tick();
</script>

实现过程详解

Step 1. 计算倒计时

定义一个函数计算倒计时,在startDay定义起始日期,如果计算的倒计时数量很多,可以拿出来单独做一个函数,此站只有一处倒计时,于是直接填入了函数中,可根据个人需求修改。

此函数需要计算出距离起始日期的天数、小时、分钟、秒数,具体代码:

function tick() {
  var days, hours, minutes, seconds;
  var startDay = new Date('2018/06/14 00:00');
  var today = new Date();
  var total = (today.getTime()-startDay.getTime())/1000;
  days=Math.floor(total/86400);
  total=total-days*86400;
  hours=format(Math.floor(total/3600));
  total=total-hours*3600;
  minutes=format(Math.floor(total/60));
  total=total-minutes*60;
  seconds=format(Math.floor(total));
}

Step 2. 时间只有1位数时格式化

可能存在时分秒只有1位数的情况,需要格式化,在小于10的前面加0。

function format(v) {
  return v < 10 ? "0" + v : "" + v
}

Step 3. 定义显示的位置

在想要显示倒计时的位置加入一个标签,可以是其他标签,重要的是id。

本站已运行了 <span id="Clock"></span>

Step 4. 将倒计时的时间加入到标签

将要显示的内容拼接成字符串,加入上一步的id的元素中,并且让这个函数每秒运行一次。

timeString = days +" 天 "+ hours +" 时 "+ minutes + " 分 "+ seconds + " 秒 ";
document.getElementById("Clock").innerHTML = timeString;
window.setTimeout("tick();", 1000);

Step 5. 避免第一秒空白问题

在页面加载完成需要立即运行一次计算函数,否则第一秒时无数据,此倒计时会显示空白。

window.onload = tick();

- END -