首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js 显示倒计时

在JavaScript中实现倒计时功能,通常会用到setIntervalsetTimeout这两个定时器函数。

基础概念

  • setInterval:按照指定的时间间隔(以毫秒为单位)重复执行一个函数。
  • setTimeout:在指定的毫秒数后执行一次函数。

优势

  • 可以方便地控制时间的流逝和事件的触发。
  • 适用于需要定时更新页面内容的场景。

类型

  • 相对时间倒计时:基于当前时间和目标时间的差值来计算剩余时间。
  • 绝对时间倒计时:设定一个固定的结束时间点,不断更新剩余时间。

应用场景

  • 购物车商品的限时抢购。
  • 活动页面的开始倒计时。
  • 会议或课程的开始提醒。

示例代码(相对时间倒计时):

代码语言:txt
复制
// 设置目标时间,例如:2023年12月31日23时59分59秒
const targetDate = new Date(2023, 11, 31, 23, 59, 59).getTime();

// 更新倒计时
const countdown = setInterval(() => {
    const now = new Date().getTime();
    const distance = targetDate - now;

    // 计算天、小时、分钟和秒
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // 显示倒计时
    console.log(`${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`);

    // 如果倒计时结束,清除定时器
    if (distance < 0) {
        clearInterval(countdown);
        console.log("倒计时结束!");
    }
}, 1000);

常见问题及解决方法

  • 时间不准确:可能是由于浏览器的节流机制或者系统时间被修改导致。可以尝试使用服务器时间来校准客户端时间。
  • 页面刷新后倒计时重置:可以将倒计时的结束时间存储在localStoragesessionStorage中,页面加载时读取并重新计算。
  • 多个倒计时冲突:确保每个倒计时实例有独立的定时器ID,并且在不需要时清除定时器。

解决方法示例(使用服务器时间校准):

代码语言:txt
复制
// 假设从服务器获取到的当前时间是serverTime
const serverTime = new Date('2023-12-31T23:59:59').getTime();
const clientTimeOffset = serverTime - new Date().getTime();

const targetDate = serverTime + (24 * 60 * 60 * 1000); // 假设目标时间是服务器时间的24小时后

const countdown = setInterval(() => {
    const now = new Date().getTime() + clientTimeOffset;
    const distance = targetDate - now;
    // ...(其余代码同上)
}, 1000);

通过这种方式,即使客户端时间发生变化,倒计时也能保持准确。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • html倒计时免费代码,JS倒计时代码汇总

    本文实例总结了常见的JS倒计时代码。分享给大家供大家参考。...具体汇总如下: 第一种:精确到秒的javascript倒计时代码 HTML代码: 离2010年还有: startclock() var timerID = null; var timerRunning...HTML代码: 第四种:最简倒计时 HTML代码: 第五种:最简倒计时二 HTML代码: function djs(){ var urodz= new Date(“11/12/2008”); var...dni == 1) num=2 else if (dni == 0) num=1 else num=0 document.write(num) } 距某某开幕式还有 [] 天 第六个:Javascript倒计时器...– 采用系统时间自校验 这次利用系统时间自校验倒计时, 无需手工调校使得倒计时更为精确, 代码及详细注释如下: 00:01:11:00 var normalelapse = 100; var nextelapse

    5.2K10
    领券