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日

相关文章

  • es6中比较有用的7个技巧小结

    ES6中比较有用的7个技巧小结 ES6(2015年发布)是ECMAScript语言的第6个版本,其中增加了很多新特性和功能。下面将介绍最常用的7个ES6技巧,并给出一些示例。 技巧1:模板字符串 ES6中增加了模板字符串的概念,使用反引号 “ 包含字符串,可以在字符串中插入表达式。模板字符串还可以格式化字符串,使用 ${expression} 表达式语法进…

    JavaScript 2023年6月10日
    00
  • React 组件中的 bind(this)示例代码

    针对React组件中的bind(this)代码示例,以下是完整攻略: 什么是bind(this) bind(this)是JavaScript ES5中引入的方法,用于显式地指定函数中this关键字的指向。 在React组件中,使用bind(this)是为了确保在组件更新或者父组件通过props传递了函数后,组件内部调用该函数this指向正确,不会出现this…

    JavaScript 2023年6月11日
    00
  • 一文搞懂 Promise 新 Api allSettled 的用法和 all 区别,以及如何在不支持新特性的环境下实现一个 Polyfill

    开始 一文搞懂 Promise 新 Api allSettled 的用法和 all 区别,以及如何在不支持新特性的环境下实现一个 Polyfill allSettled 的用法 const runAllSettled = async () => { const successPromise = Promise.resolve(‘success’) //…

    JavaScript 2023年4月30日
    00
  • JS截取与分割字符串常用技巧总结

    下面是 JS 截取与分割字符串常用技巧总结的完整攻略。 一、截取字符串 1. 截取固定长度的字符串 使用 String 对象的 substring() 方法可以截取字符串的一部分。它需要两个参数,即要截取的子字符串的起始位置和结束位置(不包括结束位置的字符)。如果只传入一个参数,那么就从该位置开始截取到字符串的末尾。 例如,要从字符串 “Hello, wor…

    JavaScript 2023年5月28日
    00
  • javascript常用的正则表达式实例

    以下是关于JavaScript常用的正则表达式实例的攻略。 正则表达式的基础知识 正则表达式是一种用于匹配字符串的方法,它基于一些规则来描述匹配模式。在JavaScript中,你可以用正则表达式去匹配一个字符串或者一个字符串数组。 在编写JavaScript中的正则表达式时,你需要使用RegExp对象。这个对象既可以通过字面量语法来创建,也可以从构造函数中实…

    JavaScript 2023年6月10日
    00
  • JavaScript如何输出杨辉三角

    JavaScript可以通过编程来输出杨辉三角,代码实现过程如下: 方法一:使用二维数组 首先需要定义一个二维数组来存储杨辉三角中的每个元素; 初始化第一列和对角线的值为1; 使用两层循环遍历二维数组,针对每个元素,根据上一个元素的值来确定当前的值; 将每行生成的内容按一定格式输出。 示例代码: // 定义杨辉三角的阶数 const row = 6; // …

    JavaScript 2023年5月28日
    00
  • PHP+mysql+ajax轻量级聊天室实现方法详解

    以下是关于“PHP+mysql+ajax轻量级聊天室实现方法详解”的完整攻略。 简介 本文将讲解如何使用 PHP、MySQL 和 Ajax 技术来创建一个轻量级聊天室。聊天室将支持实时信息交流和历史消息查看。 技术准备 在开始本教程之前,我们需要准备以下技术: PHP 5.x 或更新版本 MySQL 5.x 或更新版本 Apache 或 Nginx Web …

    JavaScript 2023年6月10日
    00
  • cordova入门基础教程及使用中遇到的一些问题总结

    Cordova入门基础教程及使用中遇到的一些问题总结 什么是Cordova? Apache Cordova(也称PhoneGap)是一个开源的移动应用程序开发框架,它允许您使用标准的Web技术(如HTML,CSS,JavaScript)编写跨平台移动应用程序。通过Cordova,您能够打包应用程序并将其转换为原生应用程序。 Cordova安装 首先,要安装C…

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