JS倒计时代码汇总

以下是详细的“JS倒计时代码汇总”的攻略。

概述

倒计时在Web开发中非常有用,比如用于处理限时优惠促销,或者用于展示一些即将到来的重要事件。本文将介绍JS倒计时的一些常用代码,帮助开发者轻松地实现倒计时功能。

普通倒计时

普通倒计时的代码非常简单,在代码中设定截止时间,然后不断更新展示倒计时的信息即可。

const deadline = new Date('2022-01-01');

function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor( (total/1000) % 60 );
  const minutes = Math.floor( (total/1000/60) % 60 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );
  return {
    'total': total,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime){
  const clock = document.getElementById(id);
  const daysSpan = clock.querySelector('.days');
  const hoursSpan = clock.querySelector('.hours');
  const minutesSpan = clock.querySelector('.minutes');
  const secondsSpan = clock.querySelector('.seconds');

  function updateClock(){
    const t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if(t.total<=0){
      clearInterval(timeinterval);
    }
  }

  updateClock();
  const timeinterval = setInterval(updateClock,1000);
}

initializeClock('clockdiv', deadline);

以上的代码通过获取设定的截止时间和当前时间之间的时间差计算出剩余的天数、小时、分钟和秒数,然后在页面中显示出来。同时设置一个定时器,每秒更新一次倒计时的信息,直到剩余时间为零。

带动画效果的倒计时

除了简单的倒计时外,我们通常还需要带有一些动画效果的倒计时。例如可以设定一个圆圈的形状,每秒更新圆圈的进度。下面是一个例子:

const deadline = new Date('2022-01-01');

function getTimeRemaining(endtime){
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor( (total/1000) % 60 );
  const minutes = Math.floor( (total/1000/60) % 60 );
  const hours = Math.floor( (total/(1000*60*60)) % 24 );
  const days = Math.floor( total/(1000*60*60*24) );
  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}

(function() {

    const deadline = new Date('2022-01-01');

    const daysSpan = document.querySelector('.days');
    const hoursSpan = document.querySelector('.hours');
    const minutesSpan = document.querySelector('.minutes');
    const secondsSpan = document.querySelector('.seconds');

    const daysProgress = document.querySelector('.progress-day');
    const hoursProgress = document.querySelector('.progress-hour');
    const minutesProgress = document.querySelector('.progress-minute');
    const secondsProgress = document.querySelector('.progress-second');

    function calculatePercentage(total, value) {
        return Math.floor((total - value) / total * 100);
    }

    function initializeClock() {

        const totalSeconds = (getTimeRemaining(deadline)).total / 1000;

        const dayTotalSeconds = 24 * 60 * 60;
        const hourTotalSeconds = 60 * 60;
        const minuteTotalSeconds = 60;

        const dayInterval = setInterval(() => {

            if (days === 0) {
                clearInterval(dayInterval);
            }

            days--;

            const dayPercentage = calculatePercentage(dayTotalSeconds, dayTotalSeconds - (days * dayTotalSeconds));
            daysSpan.innerHTML = days < 10 ? `0${days}` : days;
            daysProgress.style.strokeDashoffset = `calc(440 - (440 * ${dayPercentage}) / 100)`;

        }, dayTotalSeconds * 1000 / totalSeconds);

        let hours = (getTimeRemaining(deadline)).hours;
        const hourInterval = setInterval(() => {

            if (hours === 0) {
                clearInterval(hourInterval);
            }

            hours--;

            const hourPercentage = calculatePercentage(hourTotalSeconds, hourTotalSeconds - (hours * hourTotalSeconds));
            hoursSpan.innerHTML = hours < 10 ? `0${hours}` : hours;
            hoursProgress.style.strokeDashoffset = `calc(440 - (440 * ${hourPercentage}) / 100)`;

        }, hourTotalSeconds * 1000 / totalSeconds);

        let minutes = (getTimeRemaining(deadline)).minutes;
        const minuteInterval = setInterval(() => {

            if (minutes === 0) {
                clearInterval(minuteInterval);
            }

            minutes--;

            const minutePercentage = calculatePercentage(minuteTotalSeconds, minuteTotalSeconds - (minutes * minuteTotalSeconds));
            minutesSpan.innerHTML = minutes < 10 ? `0${minutes}` : minutes;
            minutesProgress.style.strokeDashoffset = `calc(440 - (440 * ${minutePercentage}) / 100)`;

        }, minuteTotalSeconds * 1000 / totalSeconds);

        let seconds = (getTimeRemaining(deadline)).seconds;
        const secondInterval = setInterval(() => {

            if (seconds === 0) {
                clearInterval(secondInterval);
            }

            seconds--;

            const secondPercentage = calculatePercentage(60, 60 - seconds);
            secondsSpan.innerHTML = seconds < 10 ? `0${seconds}` : seconds;
            secondsProgress.style.strokeDashoffset = `calc(440 - (440 * ${secondPercentage}) / 100)`;

        }, 1000);

    }

    initializeClock();

})();

以上代码中,通过一个SVG圆圈来实现带有进度显示的倒计时。根据截止时间和当前时间差,计算出剩余的天数、小时、分钟和秒数。然后分别为它们设定不同的定时器,每秒钟更新一次进度条的信息,直到计时结束。同时,还需要在定时器中为展示在页面中的剩余时间更新文字信息。

总结

以上是两种处理JS倒计时的常用代码。开发者可以根据具体需求选择其中一种或多种进行组合使用,实现自己想要的倒计时效果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS倒计时代码汇总 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • Handtrack.js库实现实时监测手部运动(推荐)

    下面我将详细介绍如何使用Handtrack.js库实现实时监测手部运动。 1. 简介 Handtrack.js是一个基于Tensorflow.js的开源JavaScript库,用于实时监测手部运动。它使用深度学习模型实现手部位置的检测,并可以通过调用API实时对手部位置进行跟踪。Handtrack.js可以在浏览器中运行,而无需安装任何其他软件。 2. 前提…

    JavaScript 2023年6月11日
    00
  • asp.net中button控制先执行js再执行后台程序的方法

    要实现asp.net中button控制先执行js再执行后台程序的方法,我们可以使用以下两种方法: 方法一:在button控件的OnClick事件中添加javascript代码,并在js代码中通过__doPostBack()函数触发后台的OnClick事件执行。具体实现如下: <asp:Button ID="btnSubmit" ru…

    JavaScript 2023年6月11日
    00
  • javascript中Date对象的getDay方法使用指南

    那么接下来我会详细讲解Javascript中Date对象的getDay方法使用指南。 什么是Date对象 首先需要了解的是什么是Date对象,它是Javascript原生的日期对象之一。通过Date对象,我们能够方便地对日期进行操作、格式化和计算等操作。 Date对象的getDay方法 而Date对象的getDay方法,则是用于获取某个日期在一周中的星期几。…

    JavaScript 2023年6月10日
    00
  • JavaScript 对象字面量讲解

    下面是关于JavaScript对象字面量的全面讲解: JavaScript 对象字面量讲解 JavaScript 对象是一种复合数据类型,可以包含键值对,并且可以使用点语法进行访问。对象通常用于封装相关的数据和功能,并将它们组织在一起。 对象字面量是创建 JavaScript 对象最常用的方法之一。对象字面量是使用花括号({})定义对象,每个键值对之间使用冒…

    JavaScript 2023年5月27日
    00
  • JavaScript中Promise的使用方法实例

    下面就是关于“JavaScript中Promise的使用方法实例”的完整攻略。 什么是Promise? Promise 是一种异步编程的解决方案,它解决了回调函数嵌套引起的代码可读性差、容易出错和难以维护的问题。通过 Promise,可以更加优雅、可读、容错的编写异步代码。 Promise 的基本语法结构如下: new Promise(function(re…

    JavaScript 2023年5月27日
    00
  • safari cookie设置中文失败的解决方法

    当我们在Safari浏览器中设置中文的cookie时,可能会出现设置失败的情况。下面是解决方法的完整攻略,包含以下步骤: 1. 清除浏览器缓存 首先,在Safari浏览器中选择“偏好设置”,然后选择“隐私”面板。在这里,可以看到“移除所有网站数据”的选项。点击这个按钮,清除浏览器缓存。 2. 检查Safaricookie设置和时间误差 如果以上步骤没有解决问…

    JavaScript 2023年6月11日
    00
  • Javascript 判断函数类型完美解决方案

    下面我将为你详细讲解“Javascript 判断函数类型完美解决方案”的完整攻略。 1. 判断函数类型的问题 在Javascript中,判断某个值的类型是一件很常见的事情。通常我们可以使用typeof操作符来对一个值的类型进行判断。但是当对于函数类型时,使用typeof只能得到返回值为function,无法区别不同类型的函数。 我们知道在Javascript…

    JavaScript 2023年5月27日
    00
  • html格式化输出JSON示例(测试接口)

    请注意,本攻略中,我们默认你已经了解了markdown基础语法,知道如何书写标题、代码块等。 什么是“html格式化输出JSON示例”? “html格式化输出JSON示例”是一个测试接口,其主要的功能是以HTML格式渲染JSON数据。该接口支持跨域访问,并且可以很方便地作为调试工具来使用。 如何使用该接口? 该接口的URL为https://www.coola…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部