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日

相关文章

  • js中日期的加减法

    关于 JS 中日期的加减法,我们可以使用内置的 Date 对象进行处理。 基本用法 Date 对象可以使用以下方式创建: const now = new Date(); const someDate = new Date(‘2022-01-01’); const someDateTime = new Date(‘2022-01-01T12:00:00Z’);…

    JavaScript 2023年5月27日
    00
  • js中class的点击事件没有效果的解决方法

    问题描述: 在JavaScript中使用class定义的元素,如果带有点击事件绑定,在点击时有可能不起作用,导致点击事件无法触发。 解决方法: 使用事件代理 事件代理是将处理事件的职责委托给父元素,由父元素处理所有子元素的事件。在这种情况下,即使是通过JavaScript操作添加的元素也能够正确地触发点击事件。 使用addEventListener方法为父元…

    JavaScript 2023年6月10日
    00
  • Vue 禁用浏览器的前进后退操作

    要禁用浏览器的前进后退操作,可以使用Vue-Router提供的Navigation Guards对用户的操作进行拦截。 具体实现步骤如下: 1. 在Vue-Router中使用Navigation Guards 在new VueRouter的时候,我们可以添加beforeEach函数,该函数会在每次路由切换之前调用。我们可以在该函数中进行拦截判断。 示例代码如…

    JavaScript 2023年6月11日
    00
  • vue + typescript + 极验登录验证的实现方法

    这里是详细的“vue + typescript + 极验登录验证的实现方法”攻略。 简介 极验验证码是一种常用于网站登录等安全验证的方式。而Vue是一种流行的JavaScript框架,Typescript是JavaScript的一个超集,在开发中更加规范和安全。如何在Vue项目中集成极验验证码以提高网站的安全性呢?下面是实现方法的具体步骤。 步骤一:安装极验…

    JavaScript 2023年6月11日
    00
  • JavaScript的递归之递归与循环示例介绍

    以下是“JavaScript的递归之递归与循环示例介绍”完整攻略: 前言 JavaScript的递归和循环是编程中的两种常见方法,常用于处理重复性操作。递归需要注意堆栈溢出、效率等问题,而循环则需要注意控制条件和循环变量等问题。正确选择适合的方式能够让程序更加高效、简洁。本文将通过两条示例说明递归和循环的不同实现方式及其效果。 示例一:斐波那契数列 斐波那契…

    JavaScript 2023年5月28日
    00
  • Node.js下自定义错误类型详解

    Node.js下自定义错误类型详解 在Node.js应用程序开发中,抛出错误用于表明当前出现了错误或者出现了不符合预期的行为。Node.js提供了Error对象,可以用它来创建错误实例。但有时Error对象并不能满足我们的需求,我们需要更多的信息来携带错误数据。这时就需要自定义错误类型了。 创建自定义错误类型 继承原生Error Node.js规定,所有的J…

    JavaScript 2023年5月28日
    00
  • 用js编写的简单的计算器代码程序

    为了编写一个简单的计算器程序,我们可采用HTML、CSS、JavaScript等技术。下面将分步骤讲解如何制作一个基于JS编写的简易计算器程序。 步骤一:创建基本的HTML代码 我们需要创建一个空白的HTML文件,并添加必要的元素,例如标题,文本输入框和按钮。通过以下HTML代码可以实现: <!DOCTYPE html> <html>…

    JavaScript 2023年5月27日
    00
  • JavaScript中的getDay()方法使用详解

    根据你的要求,我会用标准的markdown格式文本,为你详细讲解“JavaScript中的getDay()方法使用详解”的完整攻略。 JavaScript中的getDay()方法 在 JavaScript 中,Date 对象有一个 getDay() 方法,该方法用于获取一个星期的第几天,其返回值是一个 0 到 6 的整数,分别对应星期日到星期六。 语法如下:…

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