JavaScript实现简单的数字倒计时

下面我将详细讲解JavaScript实现简单的数字倒计时的完整攻略。

1. 实现思路

倒计时可以理解为是一段时间(比如30秒钟)的逆向计时,因此要实现数字倒计时,我们需要知道以下几个东西:

  • 终止时间(即倒计时结束时间)
  • 当前时间
  • 剩余时间(即终止时间减去当前时间)

有了以上三个数据,我们就可以通过JavaScript来实现数字倒计时,具体步骤如下:

  1. 获取元素

首先,我们需要获取页面上的倒计时元素,以便于在JavaScript中操作它。

var countdownElement = document.getElementById('countdown');
  1. 计算剩余时间

我们可以使用new Date()对象来获取当前时间,再减去终止时间,就可以得到剩余时间的毫秒数。

var endTime = new Date('2021-12-31 23:59:59');
var remainingTime = endTime.getTime() - new Date().getTime();
  1. 将剩余时间转换为天、时、分、秒格式

接下来,我们需要将剩余时间转换为天、时、分、秒格式。这可以通过一些简单的算术操作来完成。

var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
  1. 更新倒计时元素

最后一步,我们将天、时、分、秒格式的剩余时间展示到页面上的倒计时元素中。

countdownElement.innerHTML =
  "距离2022年元旦还有 " +
  days +
  " 天 " +
  hours +
  " 小时 " +
  minutes +
  " 分钟 " +
  seconds +
  " 秒";

2. 示例说明

这里提供两个示例,一个是基础版的数字倒计时,另一个是带有动态效果的数字倒计时。

示例1:基础版的数字倒计时

这个示例中,我们只展示了倒计时的基础版,比如没有样式、没有动态效果等。但它仍然可以给读者提供一个直观感受,让他们理解倒计时的实现原理。

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript实现简单的数字倒计时</title>
  </head>
  <body>
    <div id="countdown"></div>

    <script>
      var countdownElement = document.getElementById("countdown");

      var endTime = new Date("2021-12-31 23:59:59");
      var remainingTime = endTime.getTime() - new Date().getTime();

      var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
      var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

      countdownElement.innerHTML =
        "距离2022年元旦还有 " +
        days +
        " 天 " +
        hours +
        " 小时 " +
        minutes +
        " 分钟 " +
        seconds +
        " 秒";
    </script>
  </body>
</html>

示例2:带有动态效果的数字倒计时

这个示例中,我们对基础版的倒计时进行了增强,加上了动态效果。即数字不是瞬间跳变的,而是平滑缓慢地过渡到下一个数字,让页面显得更加流畅生动。

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript实现带有动态效果的数字倒计时</title>
    <style>
      .countdown {
        font-size: 40px;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        margin-top: 50px;
      }
      .number {
        width: 80px;
        height: 80px;
        background-color: yellow;
        display: inline-block;
        margin: 0 10px;
        text-align: center;
        line-height: 80px;
        position: relative;
      }
      .number:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: orange;
        z-index: -1;
        opacity: 0;
        transition: all 0.3s ease-in-out;
      }
      .number.active:before {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="countdown">
      <span class="number" id="days"></span>
      <span class="number" id="hours"></span>
      <span class="number" id="minutes"></span>
      <span class="number" id="seconds"></span>
    </div>

    <script>
      var countdownElement = document.querySelector(".countdown");
      var daysElement = document.getElementById("days");
      var hoursElement = document.getElementById("hours");
      var minutesElement = document.getElementById("minutes");
      var secondsElement = document.getElementById("seconds");

      function updateCountdown() {
        var endTime = new Date("2021-12-31 23:59:59");
        var remainingTime = endTime.getTime() - new Date().getTime();

        var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
        var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

        // 用一个对象来存储每个数字对应的元素
        var elements = {
          days: daysElement,
          hours: hoursElement,
          minutes: minutesElement,
          seconds: secondsElement,
        };

        // 遍历所有数字元素,为每个元素添加active类名
        Object.keys(elements).forEach(function (key) {
          var element = elements[key];
          var value = eval(key);

          element.classList.remove("active");
          setTimeout(function () {
            element.innerHTML = value < 10 ? "0" + value : value;
            element.classList.add("active");
          }, 0);
        });

        // 每秒更新倒计时
        setTimeout(updateCountdown, 1000);
      }

      updateCountdown();
    </script>
  </body>
</html>

希望这篇文章对你有帮助!如果你还有其他问题,请继续问我。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript实现简单的数字倒计时 - Python技术站

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

相关文章

  • 原生JS面向对象实现打砖块小游戏

    一、前言 打砖块小游戏是经典的游戏之一,其规则简单,玩法有趣且易上手。本篇攻略将带领大家使用原生JS面向对象的方式来实现打砖块小游戏。 二、需求分析 打砖块小游戏的基本需求如下: 游戏界面要有一个球、多个砖块和一个挡板,球碰到砖块或者挡板之后反弹。 球和挡板可以通过鼠标或者键盘来控制。 游戏结束条件:砖块被撞完或者球跌落屏幕下方。 三、实现步骤 Step 1…

    JavaScript 2023年6月10日
    00
  • 使用vue-router为每个路由配置各自的title

    针对如何使用vue-router为每个路由配置各自的title,可以按照以下完整攻略进行操作: 1.在路由中设置meta属性 首先在路由中设置meta属性,可以定义一个meta属性,用于存储每个路由的标题,具体代码如下: const routes = [ { path: ‘/’, name: ‘home’, component: Home, meta: { …

    JavaScript 2023年6月11日
    00
  • ES6_day01

    ### canvas特性 标签中的文本只有在浏览器下支持canvas标签时才显示 行内块元素 高度设置在标签属性上 ### 填充色设置 ctx.fillStyle=”#ff0000″ ### 线条颜色设置 ctx.strokeStyle=”ff0000″ ### 线条粗细 ctx.lineWidth=”” 线 moveTo(x,y) 开始位置 lineTo(…

    JavaScript 2023年4月18日
    00
  • JSON.stringify()方法讲解

    JSON.stringify()方法讲解 什么是 JSON.stringify() 方法? JSON.stringify() 方法是将 JavaScript 对象或值转换为 JSON 字符串的常用方法。 方法语法: JSON.stringify(value[, replacer[, space]]) 参数解释: value:必选参数,需要转换成 JSON 字…

    JavaScript 2023年5月27日
    00
  • ajax 服务器文本框自动填值

    下面我来详细讲解“ajax 服务器文本框自动填值”的完整攻略。 1. 什么是 AJAX? Ajax 是一种用于创建快速动态网页应用程序的技术。通过使用 Ajax,可以实现无刷新更新页面内容,从而提高用户的交互体验。 2. AJAX如何使文本框自动填值? 使用 Ajax 可以通过向服务器发送异步请求,获取服务器返回的数据,并将数据填充到页面中。因此,我们可以通…

    JavaScript 2023年6月11日
    00
  • 详谈js中window.location.search的用法和作用

    下面我将详细讲解“详谈js中window.location.search的用法和作用”的完整攻略。 什么是window.location.search? 在浏览器中,window.location对象包含了当前页面的地址信息。window.location.search表示URL中?字符后面的参数部分,这个参数部分通常被称为查询参数(query string…

    JavaScript 2023年6月11日
    00
  • vue-cli4项目开启eslint保存时自动格式问题

    下面是“vue-cli4项目开启eslint保存时自动格式问题”的完整攻略。 1. 安装必要依赖 首先,我们需要安装一些必要的依赖,以支持Eslint的自动格式化功能。具体操作如下: 安装Eslint相关依赖 npm install eslint –save-dev npm install eslint-plugin-vue –save-dev npm …

    JavaScript 2023年6月10日
    00
  • 你不知道的 javascript【推荐】

    你不知道的 Javascript【推荐】攻略 1. 简介 你不知道的 Javascript 是一本非常优秀的JavaScript教程,分为上下两册,包含了JavaScript的许多高阶概念和一些常见误解,非常适合深入学习Javascript的开发者。本教程文字讲解详细,理论与实践相结合,是你深入学习Javascript的好帮手。 2. 内容概述 上册 上册主…

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