JavaScript实现倒计时的代码及使用方法

作者:Glow head浏览:1198时间:2023-04-14 23:31:26

倒计时是我们在很多场景下都需要用到的功能,比如网站上的秒杀倒计时、活动倒计时等等。而JavaScript是一种常用的实现倒计时的语言,本文将介绍JavaScript实现倒计时的代码及使用方法。


使用setInterval函数

使用setInterval函数是一种比较简单的实现倒计时的方法。代码如下:


javascript代码


function countdown(targetTime) {

  var nowTime = new Date().getTime();

  var distance = targetTime - nowTime;

  var days = Math.floor(distance / (1000 * 60 * 60 * 24));

  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

  var seconds = Math.floor((distance % (1000 * 60)) / 1000);


  // 显示倒计时

  document.getElementById("countdown").innerHTML =

    days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒 ";


  if (distance < 0) {

    clearInterval(intervalId);

    document.getElementById("countdown").innerHTML = "倒计时已结束";

  }

}


// 设置目标时间

var targetTime = new Date("2023-05-01T00:00:00Z").getTime();


// 每秒钟更新一次倒计时

var intervalId = setInterval(function() {

  countdown(targetTime);

}, 1000);

使用setTimeout函数

使用setTimeout函数也是一种实现倒计时的方法,代码如下:


javascript代码


function countdown(targetTime) {

  var nowTime = new Date().getTime();

  var distance = targetTime - nowTime;

  var days = Math.floor(distance / (1000 * 60 * 60 * 24));

  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

  var seconds = Math.floor((distance % (1000 * 60)) / 1000);


  // 显示倒计时

  document.getElementById("countdown").innerHTML =

    days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒 ";


  if (distance > 0) {

    setTimeout(function() {

      countdown(targetTime);

    }, 1000);

  } else {

    document.getElementById("countdown").innerHTML = "倒计时已结束";

  }

}


注明:【本篇文章是原创文章,如需转载请注明本站名称和原文地址!若发现未经本站同意拷贝将追究版权责任!】

最新发布

Copyright 2023—2027 All Rights Reserved 厦门万维云信息技术有限公司  备案号:闽ICP备20001275号 地址:福建省厦门市集美区厦门产业园技术研究院创新大厦809