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日

相关文章

  • 一实用的实现table排序的Javascript类库

    我们来讲解一下如何实现table排序的Javascript类库。 概述 在网页中经常会用到表格（table），而对于一大堆数据，我们需要以某种特定的方式来进行排序，这时候就需要一个table排序的Javascript类库。下面，我们将通过一个简单的示例来讲解如何使用该类库实现排序功能。 准备工作 我们需要在HTML页面中引入jQuery框架以及js库文件so…

    JavaScript 2023年6月10日
    00

  • Javascript POSITIVE_INFINITY 属性

    以下是关于JavaScript POSITIVE_INFINITY属性的完整攻略。 JavaScript POSITIVE_INFINITY属性 JavaScript POSITIVE_INFINITY属性是Number对象的一个属性，它表示JavaScript中的正无穷大。我们可以POSITIVE_INFINITY属性来检查数字是否为正无穷大，或者进行一些…

    JavaScript 2023年5月11日
    00

  • 图解JavaScript作用域链底层原理

    下面就为大家讲解一下“图解JavaScript作用域链底层原理”的完整攻略。 什么是作用域链？ 作用域链指的是在 JavaScript 中，用于查找变量的一种机制。在 JavaScript 中，每个函数都有一个作用域链，它是由多个执行上下文（Execution Context）（如全局上下文、函数上下文等）的变量环境引用组成的链式结构。在查找变量时，Java…

    JavaScript 2023年6月10日
    00

  • javascript写一个ajax自动拦截并下载数据代码实例

    这里给出一个完整的“javascript写一个ajax自动拦截并下载数据”的攻略。 1. 理解AJAX AJAX全称为Asynchronous Javascript And XML，即异步JavaScript和XML，是一种在Web页面中实现异步数据交互的技术。使用AJAX可以在不刷新整个页面的情况下，通过后台异步加载数据，实现局部数据的更新。 2. 如何实…

    JavaScript 2023年6月10日
    00

  • 菜鸟javascript基础整理1

    菜鸟JavaScript基础整理1攻略 简介 这篇攻略是针对菜鸟JavaScript基础整理第1部分而写的。此系列基础整理旨在帮助初学者掌握JavaScript的基础知识。 内容概述 本篇攻略包括以下部分： 基础语法 数据类型 运算符 条件语句与循环语句 函数 正文 1. 基础语法 JavaScript的基本语法与其他编程语言相似，包括用于声明变量的关键字、…

    JavaScript 2023年5月27日
    00

  • JS字符串和数组如何实现相互转化

    JS字符串和数组可以通过内置的方法相互转化。 1. 字符串转数组 字符串可以使用 split() 方法转换为数组。split() 方法将字符串按照指定的分隔符分割成多个子字符串，并将子字符串存储到一个新的数组中。 语法如下： string.split(separator, limit) separator 是分隔符，可以是字符串或正则表达式。如果省略分隔符，…

    JavaScript 2023年5月28日
    00

  • JS实现一个文件选择组件详解

    这里是关于 “JS实现一个文件选择组件详解”的攻略： 概述 本文将介绍如何使用 JavaScript 实现一个文件选择组件，包括 HTML、CSS 和 JavaScript 三个方面。通过阅读本文，您将学习到如何构建一个可以选择单个或多个文件的文件选择组件，并了解如何通过事件处理程序获取用户选择的文件。 HTML 首先，需要在 HTML 页面中创建一个 in…

    JavaScript 2023年5月27日
    00

  • JS中的THIS和WINDOW.EVENT.SRCELEMENT详解

    JS中的this关键字 什么是this? 在JavaScript中，this是一个特殊的关键字，它在函数内部起着重要的作用，表明当前代码执行的上下文。当代码执行时，this的值会根据代码的上下文而动态的改变。 this指向的值 this关键字指向的是当前代码的“拥有者”或“执行者”，它的值会因为当前代码所在的位置而变化。下面是几个示例： this指向wind…

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