js实现页面多个日期时间倒计时效果

JS实现页面多个日期时间倒计时效果的攻略如下:

1. 获取倒计时目标时间

首先,我们需要通过JS获取到倒计时的目标时间。目标时间可以通过后端接口获取,也可以通过前端手动指定。我们可以使用Date对象,把目标时间转化为时间戳,之后再与当前时间的时间戳作差,得到剩余时间。

// 获取目标时间
let targetTime = new Date('2022-01-01 00:00:00').getTime();

// 获取当前时间
let currentTime = new Date().getTime();

// 剩余时间
let remainingTime = targetTime - currentTime;

2. 倒计时的格式化

计算出倒计时的剩余时间后,我们需要将剩余时间格式化成我们需要的样式。常见的倒计时样式有天-时-分-秒时-分-秒,以天数为单位的倒计时还需要把剩余时间转化为“天-时-分-秒”的格式。

// 将剩余时间格式化为天-时-分-秒的格式
function formatTime(time) {
  let day = Math.floor(time / (1000 * 60 * 60 * 24));
  let hour = Math.floor((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minute = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60));
  let second = Math.floor((time % (1000 * 60)) / 1000);
  return `${day}天${hour}时${minute}分${second}秒`;
}

3. 定时器实现倒计时

有了倒计时的目标时间和格式化后的剩余时间,我们就可以通过定时器实时更新倒计时了。通过setInterval()函数,我们可以设置倒计时每隔一段时间更新一次。

// 倒计时显示到页面上
let timer = setInterval(function() {
  let currentTime = new Date().getTime();
  let remainingTime = targetTime - currentTime;
  document.getElementById("countdown").innerText = formatTime(remainingTime);
  if (remainingTime < 0) {
    clearInterval(timer);
  }
}, 1000);

示例

下面是一个使用上述攻略实现简单倒计时的示例,页面上同时倒计时两个目标时间,一个是2022年元旦,一个是2022年春节:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>倒计时</title>
  </head>
  <body>
    <p>距离2022年元旦还有<span id="countdown1"></span></p>
    <p>距离2022年春节还有<span id="countdown2"></span></p>
    <script>
      // 定义格式化时间函数
      function formatTime(time) {
        let day = Math.floor(time / (1000 * 60 * 60 * 24));
        let hour = Math.floor((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        let minute = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60));
        let second = Math.floor((time % (1000 * 60)) / 1000);
        return `${day}天${hour}时${minute}分${second}秒`;
      }

      // 定义元旦的倒计时目标时间
      let targetTime1 = new Date('2022-01-01 00:00:00').getTime();
      // 定义春节的倒计时目标时间
      let targetTime2 = new Date('2022-02-01 00:00:00').getTime();

      // 元旦倒计时
      let timer1 = setInterval(function() {
        let currentTime = new Date().getTime();
        let remainingTime = targetTime1 - currentTime;
        document.getElementById("countdown1").innerText = formatTime(remainingTime);
        if (remainingTime < 0) {
          clearInterval(timer1);
        }
      }, 1000);

      // 春节倒计时
      let timer2 = setInterval(function() {
        let currentTime = new Date().getTime();
        let remainingTime = targetTime2 - currentTime;
        document.getElementById("countdown2").innerText = formatTime(remainingTime);
        if (remainingTime < 0) {
          clearInterval(timer2);
        }
      }, 1000);
    </script>
  </body>
</html>

以上示例代码将在网页上同时显示距离2022年元旦和春节的倒计时。其中,代码部分讲解了如何获取目标时间,如何倒计时格式化,以及如何通过setInterval()函数实现定时器,同时也包含了一个完整的示例。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js实现页面多个日期时间倒计时效果 - Python技术站

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

相关文章

  • BootStrap 动态添加验证项和取消验证项的实现方法

    当我们使用 Bootstrap 进行表单验证时,我们需要使用其提供的表单验证插件来简化验证开发。Bootstrap 的表单验证插件可以被在 HTML 标记中定义的 data 属性触发,例如 required、pattern 和 minlength。但是我们也需要动态地添加或取消这些验证项。 下面是Bootstrap动态添加验证项的实现方法: 动态添加 req…

    JavaScript 2023年6月10日
    00
  • 如何通过setTimeout理解JS运行机制详解

    接下来我将详细讲解如何通过setTimeout理解JS运行机制详解。 一、setTimeout概述 在深入了解JS运行机制之前我们需要先简单介绍一下setTimeout。 setTimeout指定要在多少毫秒后执行指定的代码,这是一个异步函数。使用setTimeout时你需要传递两个参数:要执行的函数以及延迟的时间,单位是毫秒。例如: setTimeout(…

    JavaScript 2023年6月10日
    00
  • 纯JavaScript代码实现文本比较工具

    下面我将详细阐述“纯JavaScript代码实现文本比较工具”的完整攻略。主要包括以下几个步骤: 1. 获取文本内容 在代码中定义两个文本框,分别用于输入需要比较的文本内容。然后通过JavaScript代码获取文本框中的内容,并将其存储为字符串。 var text1 = document.getElementById("text1").v…

    JavaScript 2023年5月27日
    00
  • javascript的offset、client、scroll使用方法详解

    JavaScript的offset、client、scroll使用方法详解 什么是offset、client、scroll 在讲解使用方法前,我们先来了解一下offset、client、scroll:- offset:页面元素相对于offsetParent的位置,包括top、left、right、bottom- client:页面元素相对于视口的位置,包括t…

    JavaScript 2023年6月11日
    00
  • js计算字符串长度包含的中文是utf8格式

    计算字符串长度是 JavaScript 中常见的需求,但要注意的是在字符串中如果包含了中文字符,这时候需要使用 UTF-8 编码计算字符串的长度。下面是实现步骤: 1. 获取 UTF-8 编码的长度 对于 UTF-8 编码来说,一个中文字符占用 3 个字节。可以使用 JavaScript 的 encodeURIComponent 函数对中文字符编码,然后使用…

    JavaScript 2023年5月28日
    00
  • JS操作XML实例总结(加载与解析XML文件、字符串)

    加载与解析XML文件、字符串是JS操作XML的重要部分,本文将为您详细讲解如何完成此操作。 加载XML文件 使用XMLHttpRequest对象,可以向服务器请求XML文件并返回。具体步骤如下: 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); 打开XML文件 xhr.open(“GET”, “exampl…

    JavaScript 2023年5月27日
    00
  • javascript数组元素删除方法delete和splice解析

    JavaScript数组元素删除方法delete和splice解析 对于JavaScript数组,删除操作是常见的一种操作,但是我们可以使用不同的方法进行删除操作,其中最常用的有删除元素的方法delete和splice。 delete方法 delete方法会将对应下标的元素删除,但是会保留这个位置,也就是说对于这个数组来说,这个位置还是存在的,只是该位置的值…

    JavaScript 2023年5月27日
    00
  • 原生JS实现的跳一跳小游戏完整实例

    作为网站的作者,我很乐意为大家提供原生JS实现的跳一跳小游戏的完整攻略。 简介 跳一跳是一款非常流行的手机游戏,它的玩法简单而又有趣。本攻略将介绍如何用原生JS实现一个跳一跳的小游戏,包括如何实现小人跳跃、生成随机方块、游戏分数计算等。 实现步骤 1. 初始化游戏画布 首先,我们需要在HTML页面中创建一个画布(canvas),并通过JS获取它的上下文(co…

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