1. Python技术站首页
  2. 其他
  3. JavaScript

基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果

• JavaScript

实现倒计时的方式有很多种，下面我将详细讲解一种基于JavaScript代码实现简单易用的倒计时效果的攻略。

步骤一：HTML结构

首先，我们需要在HTML中构建出需要展示倒计时的元素，我们可以使用两个div元素，其中一个用来显示时分秒，另一个用来显示天数。

以下是示例代码：

<div id="countdown">
  <div id="countdown-days"></div>
  <div id="countdown-time"></div>
</div>

步骤二：CSS样式

接下来需要为倒计时元素设置样式，如宽度、高度、背景颜色、字体大小等。

以下是示例代码：

#countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background-color: #ccc;
  font-size: 24px;
  font-weight: bold;
}

#countdown-days {
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #555;
  color: #fff;
}

#countdown-time {
  padding: 5px 10px;
  background-color: #444;
  color: #fff;
}

步骤三：JavaScript代码

接下来是最重要的部分，通过JavaScript代码实现倒计时效果。首先，我们需要获取倒计时结束的日期时间，然后计算出与当前时间的时间差，最后以天、时、分、秒的形式展示出来。

以下是示例代码：

//设置倒计时结束的日期时间
const countdownDate = new Date("2022-01-01 00:00:00").getTime();

//每秒更新一次倒计时
const interval = setInterval(() => {
  //获取当前时间
  const now = new Date().getTime();

  //计算与结束时间的时间差
  const diff = countdownDate - now;

  //计算天数、小时数、分钟数、秒数
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);

  //更新倒计时元素内容
  document.getElementById("countdown-days").innerHTML = `${days} 天`;
  document.getElementById("countdown-time").innerHTML = `${hours} 时 ${minutes} 分 ${seconds} 秒`;

  //倒计时结束时清除定时器
  if (diff <= 0) {
    clearInterval(interval);
  }
}, 1000);

步骤四：完整代码

以下是完整的HTML、CSS、JavaScript代码示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>倒计时示例</title>
    <style>
      #countdown {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        background-color: #ccc;
        font-size: 24px;
        font-weight: bold;
      }

      #countdown-days {
        margin-right: 10px;
        padding: 5px 10px;
        background-color: #555;
        color: #fff;
      }

      #countdown-time {
        padding: 5px 10px;
        background-color: #444;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="countdown">
      <div id="countdown-days"></div>
      <div id="countdown-time"></div>
    </div>

    <script>
      //设置倒计时结束的日期时间
      const countdownDate = new Date("2022-01-01 00:00:00").getTime();

      //每秒更新一次倒计时
      const interval = setInterval(() => {
        //获取当前时间
        const now = new Date().getTime();

        //计算与结束时间的时间差
        const diff = countdownDate - now;

        //计算天数、小时数、分钟数、秒数
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((diff % (1000 * 60)) / 1000);

        //更新倒计时元素内容
        document.getElementById("countdown-days").innerHTML = `${days} 天`;
        document.getElementById("countdown-time").innerHTML = `${hours} 时 ${minutes} 分 ${seconds} 秒`;

        //倒计时结束时清除定时器
        if (diff <= 0) {
          clearInterval(interval);
        }
      }, 1000);
    </script>
  </body>
</html>

示例说明

示例一：

假设我们现在需要倒计时到2022年1月1日，并将倒计时以天、时、分、秒的形式展示出来。我们可以在HTML中构建以下结构：

<div id="countdown">
  <div id="countdown-days"></div>
  <div id="countdown-time"></div>
</div>

然后在JavaScript代码中设置倒计时结束的日期时间，并以每秒更新一次的方式计算与当前时间的时间差，最后以天、时、分、秒的形式更新倒计时元素内容。

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>倒计时示例</title>
    <style>
      #countdown {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        background-color: #ccc;
        font-size: 24px;
        font-weight: bold;
      }

      #countdown-days {
        margin-right: 10px;
        padding: 5px 10px;
        background-color: #555;
        color: #fff;
      }

      #countdown-time {
        padding: 5px 10px;
        background-color: #444;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="countdown">
      <div id="countdown-days"></div>
      <div id="countdown-time"></div>
    </div>

    <script>
      //设置倒计时结束的日期时间
      const countdownDate = new Date("2022-01-01 00:00:00").getTime();

      //每秒更新一次倒计时
      const interval = setInterval(() => {
        //获取当前时间
        const now = new Date().getTime();

        //计算与结束时间的时间差
        const diff = countdownDate - now;

        //计算天数、小时数、分钟数、秒数
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((diff % (1000 * 60)) / 1000);

        //更新倒计时元素内容
        document.getElementById("countdown-days").innerHTML = `${days} 天`;
        document.getElementById("countdown-time").innerHTML = `${hours} 时 ${minutes} 分 ${seconds} 秒`;

        //倒计时结束时清除定时器
        if (diff <= 0) {
          clearInterval(interval);
        }
      }, 1000);
    </script>
  </body>
</html>

示例二：

假设我们现在需要倒计时10分钟，并将倒计时以秒的形式展示出来。我们可以在HTML中构建以下结构：

<div id="countdown"></div>

然后在JavaScript代码中设置倒计时结束的日期时间，并以每秒更新一次的方式计算与当前时间的时间差，最后以秒的形式更新倒计时元素内容。

完整代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>倒计时示例</title>
    <style>
      #countdown {
        height: 60px;
        font-size: 24px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="countdown"></div>

    <script>
      //设置倒计时结束的日期时间
      const countdownDate = new Date().getTime() + 10 * 60 * 1000;

      //每秒更新一次倒计时
      const interval = setInterval(() => {
        //获取当前时间
        const now = new Date().getTime();

        //计算与结束时间的时间差
        const diff = countdownDate - now;

        //计算剩余秒数
        const seconds = Math.floor(diff / 1000);

        //更新倒计时元素内容
        document.getElementById("countdown").innerHTML = `${seconds} 秒`;

        //倒计时结束时清除定时器
        if (diff <= 0) {
          clearInterval(interval);
        }
      }, 1000);
    </script>
  </body>
</html>

以上就是实现倒计时的完整攻略，总体来说，实现倒计时效果需要HTML、CSS、JavaScript三部分代码配合完成。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • jQuery中读取json文件示例代码

    针对你的问题，我将为你提供详细的解答。 如果要在jQuery中读取JSON文件，可以使用jQuery中的ajax()方法。ajax()方法通过HTTP请求加载远程的或本地的数据。 以下是使用ajax()方法读取JSON文件的示例代码： $.ajax({ url: "data.json", // 必须是本地的或远程的JSON文件路径 dat…

    JavaScript 2023年5月27日
    00

  • Javascript Date getDay() 方法

    以下是关于JavaScript Date对象的getDay()方法的完整攻略，包括两个示例说明。 JavaScript Date对象的getDay()方法 JavaScript Date对象的getDay()方法返回一个星期中的某一天（0-6）。该方法可用获取当前日期的星期几。 下是使用Date对象的getDay()方法的示例： var date = new…

    JavaScript 2023年5月11日
    00

  • JavaScript整除运算函数ceil和floor的区别分析

    下面我来为你讲解一下“JavaScript整除运算函数ceil和floor的区别分析”。 1. 序言 在 JavaScript 中，Math.ceil() 和 Math.floor() 都是用于实现上取整和下取整操作的函数。在实际开发过程中，这两个函数经常被用来计算数据的精度。但是这两个函数之间还是有一些微小的差异，接下来我们将会逐一解释它们之间的区别。 2…

    JavaScript 2023年6月11日
    00

  • JS简单生成随机数(随机密码)的方法

    生成随机数或随机密码是前端开发中比较常见的需求。在JavaScript中，我们可以通过Math对象来生成随机数。下面是完整的攻略： 1. 生成随机整数 生成随机整数的代码如下： // 生成随机整数 function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); re…

    JavaScript 2023年5月28日
    00

  • 使用C# 的webBrowser写模拟器时的javascript脚本调用问题

    使用 C# 的 WebBrowser 写模拟器时，常常涉及到对 JavaScript 脚本的调用。以下是一个完整的攻略，详细讲解如何在 C# 的 WebBrowser 中调用 JavaScript 脚本。 1. 步骤一：向 WebBrowser 添加加载完成事件 首先需要向 WebBrowser 添加加载完成事件，确保在页面加载完成后再执行 JavaScri…

    JavaScript 2023年6月10日
    00

  • jQuery getJSON()+.ashx 实现分页(改进版)

    下面就为您详细讲解“jQuery getJSON()+.ashx实现分页(改进版)”的攻略。 一、准备工作 1.创建基础网页 首先，您需要创建一个基础网页，html部分如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="U…

    JavaScript 2023年5月27日
    00

  • javascript面向对象之定义成员方法实例分析

    JavaScript面向对象之定义成员方法实例分析 在JavaScript中，可以使用面向对象的思想来编写代码，其中定义成员方法是非常常见的操作。本文将详细讲解如何定义成员方法以及如何使用。 什么是成员方法 成员方法是一种在类或对象中定义的函数。它们可以访问类或对象的数据和其他方法，并能够执行特定的操作。 如何定义成员方法 在JavaScript中，可以通过…

    JavaScript 2023年5月27日
    00

  • JavaScript find()方法及返回数据实例

    下面是关于JavaScript中find()方法及返回数据的完整攻略，包括方法的介绍、语法、参数、返回值和示例说明。 find()方法介绍 JavaScript中的find()方法是ES6中新增加的数组方法之一，用于返回符合条件的第一个数组元素，如果没有符合条件的元素则返回undefined。 find()方法的语法 array.find(function(…

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