jquery javascript 之倒计时天时分秒

Javascript：之倒计时天时分秒<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta...

幽幽靖

634人浏览 · 2019-10-23 17:32:41

幽幽靖 · 2019-10-23 17:32:41 发布

Javascript：之倒计时天时分秒

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <div id="times_wrap" class="time_num">
    距离结束时间：
    <div class="time_w">
      <b id="times_d" class="time"> </b>天
      <b id="times_h" class="time"> </b>时
      <b id="times_m" class="time"> </b>分
      <b id="times_s" class="time"> </b>秒
    </div>
  </div>
  <script type="text/javascript">
    setTimeout("show_time()", 1000);
    var time_wrap = document.getElementById("times_wrap");
    var time_d = document.getElementById("times_d");
    var time_h = document.getElementById("times_h");
    var time_m = document.getElementById("times_m");
    var time_s = document.getElementById("times_s");

    var time_end = new Date("2019/10/25 08:00:00"); // 设定结束时间
    time_end = time_end.getTime();

    function show_time() {
      var time_now = new Date(); // 获取当前时间
      time_now = time_now.getTime();
      var time_distance = time_end - time_now; // 结束时间减去当前时间
      var int_day, int_hour, int_minute, int_second;
      if (time_distance >= 0) {
        // 天时分秒换算
        int_day = Math.floor(time_distance / 86400000)
        time_distance -= int_day * 86400000;
        int_hour = Math.floor(time_distance / 3600000)
        time_distance -= int_hour * 3600000;
        int_minute = Math.floor(time_distance / 60000)
        time_distance -= int_minute * 60000;
        int_second = Math.floor(time_distance / 1000)

        // 时分秒为单数时、前面加零站位
        if (int_hour < 10)
          int_hour = "0" + int_hour;
        if (int_minute < 10)
          int_minute = "0" + int_minute;
        if (int_second < 10)
          int_second = "0" + int_second;

        // 显示时间
        time_d.innerHTML = int_day;
        time_h.innerHTML = int_hour;
        time_m.innerHTML = int_minute;
        time_s.innerHTML = int_second;

        setTimeout("show_time()", 1000);
      } else {
        time_d.innerHTML = time_d.innerHTML;
        time_h.innerHTML = time_h.innerHTML;
        time_m.innerHTML = time_m.innerHTML;
        time_s.innerHTML = time_s.innerHTML;

        // clearTimeout(timerID)
      }
    };
  </script>
</body>

</html>

如果一个页面中有多个倒计时天时分秒，可以用循环方法来做：

		<li class="housecon">
          <div class="toptit clearfix">
            <p class="lef">【2019-10-20】通州品质洋房看房专线</p>
            <div class="timebox">
              <p class="none jieshutime">2019/12/25 08:00:00</p>
              <p>距离结束还有
                <span>5</span>天
                <span>16</span>小时
                <span>15</span>分
                <span>20</span>秒
              </p>
            </div>
          </div>
        </li>
        <li class="housecon">
          <div class="toptit clearfix">
            <p class="lef">【2019-10-22】1V1专车看房 免费接送 随时看房</p>
            <div class="timebox">
              <p class="none jieshutime">2019/10/28 03:00:00</p>
              <p>距离结束还有
                <span>5</span>天
                <span>16</span>小时
                <span>15</span>分
                <span>20</span>秒
              </p>
            </div>
          </div>
        </li>
        
<script>
    $('.housecon').each(function () {
      var time_wrap = $(this).find(".timebox");
      var time_d = $(this).find(".timebox span").eq(0);
      var time_h = $(this).find(".timebox span").eq(1);
      var time_m = $(this).find(".timebox span").eq(2);
      var time_s = $(this).find(".timebox span").eq(3);
      setTimeout(function () {
        show_time()
      }, 1000);

      var time_end = new Date($(this).find(".timebox .jieshutime").text()); 
      //结束时间放在的页面里，从页面获取。。
      // new Date("2019/10/25 08:00:00"); // 设定结束时间
      time_end = time_end.getTime();

      function show_time() {
        var time_now = new Date(); // 获取当前时间
        // console.log(time_now);
        time_now = time_now.getTime();
        var time_distance = time_end - time_now; // 结束时间减去当前时间
        var int_day, int_hour, int_minute, int_second;
        if (time_distance >= 0) {
          // 天时分秒换算
          int_day = Math.floor(time_distance / 86400000)
          time_distance -= int_day * 86400000;
          int_hour = Math.floor(time_distance / 3600000)
          time_distance -= int_hour * 3600000;
          int_minute = Math.floor(time_distance / 60000)
          time_distance -= int_minute * 60000;
          int_second = Math.floor(time_distance / 1000)

          // 时分秒为单数时、前面加零站位
          if (int_hour < 10)
            int_hour = "0" + int_hour;
          if (int_minute < 10)
            int_minute = "0" + int_minute;
          if (int_second < 10)
            int_second = "0" + int_second;

          // 显示时间
          time_d.text(int_day);
          time_h.text(int_hour);
          time_m.text(int_minute);
          time_s.text(int_second);

          setTimeout(function () {
            show_time()
          }, 1000);
        } else {
          time_d.text(time_d.text());
          time_h.text(time_h.text());
          time_m.text(time_m.text());
          time_s.text(time_s.text());

          // clearTimeout(timerID)
        }
      };

    })
  </script>

ok啦。。。

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r