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日

相关文章

  • javascript删除字符串最后一个字符

    要删除JavaScript字符串的最后一个字符,可以使用以下方法: 方法一:使用slice() 可以使用slice()方法来删除字符串的最后一个字符。该方法返回一个新字符串,该字符串包含从起始索引到终止索引(但不包括终止索引)之间的字符,可以忽略终止索引,以删除字符串的最后一个字符。 let str = "Hello World!"; l…

    JavaScript 2023年5月28日
    00
  • 在javascript将NodeList作为Array数组处理的方法

    将NodeList作为Array数组处理的方法是在javascript中非常有用的技巧之一。在许多情况下,获得的是NodeList类型的HTML元素集合,我们可能需要对集合进行操作,比如对集合进行排序,筛选等。然而,NodeList不是真正的数组类型,它缺少数组类型的操作和方法。幸运的是,我们可以使用一些技巧将NodeList转换为以进行操作的数组。 在ja…

    JavaScript 2023年5月27日
    00
  • 微信小程序API—获取定位的详解

    微信小程序API—获取定位的详解 什么是获取定位? 获取定位是指小程序通过调用微信所提供的API,获得用户当前的地理位置信息。通过获取定位,小程序可以根据用户所在的位置提供相应的服务。 如何获取定位? 在小程序中,我们可以通过wx.getLocation()方法来获取用户当前位置的经纬度信息。在API文档中,我们可以找到该方法的详细描述。下面是该方法的基本语…

    JavaScript 2023年6月11日
    00
  • JS简单设置下拉选择框默认值的方法

    下面是JS简单设置下拉选择框默认值的方法的完整攻略。 确定下拉选择框的id 首先,需要确定下拉选择框的id属性值,以便在JavaScript中选择该元素对象。下拉选择框的id属性值一般通过HTML中的id属性指定。例如: <select id="color"> <option value="red"&…

    JavaScript 2023年6月11日
    00
  • javascript面向对象的方式实现的弹出层效果代码

    JavaScript中面向对象编程(Object-Oriented Programming,简称OOP)是一种常见的编程方式,通过将数据属性和方法封装在对象中,实现了代码的复用性、可读性和可维护性。本文将从实现弹出层效果的角度,详细讲解如何使用JavaScript面向对象的方式实现弹出层效果的代码。 构建弹出层对象 首先,我们需要创建一个弹出层对象。这个对象…

    JavaScript 2023年6月10日
    00
  • 详解JavaScript的表达式与运算符

    详解JavaScript的表达式与运算符 什么是表达式与运算符? 表达式(Expression)是一个可求值的代码片段,它可以包含变量、运算符、函数调用等,并最终会返回一个值。JavaScript 中的表达式有很多种类,如算术表达式、赋值表达式、比较表达式、逻辑表达式等。 运算符(Operator)则是用来处理表达式的一种特殊符号,它可以识别操作数之间的关系…

    JavaScript 2023年5月19日
    00
  • 详解JavaScript常用的Hook脚本

    详解JavaScript常用的Hook脚本 什么是Hook脚本? 在编程中,Hook脚本指的是通过修改或者扩展程序中已定义的功能来实现新的功能或者增强原有功能的一种技术手段。JavaScript常用的Hook脚本主要是基于前端页面中的DOM元素和事件实现的。 Hook脚本的实现方法 Hook脚本的实现方法主要有两种:一种是利用浏览器提供的API来操作DOM元…

    JavaScript 2023年6月10日
    00
  • 转换字符串为json对象的方法详解

    当我们从外部获取到一个字符串,而这个字符串是符合json格式的,那么这个时候我们需要将这个字符串转换成json对象,方便我们在程序中处理数据。 下面是几种常见的将字符串转换为json对象的方法: 使用JSON.parse(string) JSON.parse() 是 JavaScript 中的一个内置函数,可以将一个符合 JSON 格式的字符串转化为 JSO…

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