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

一个不错的js html页面倒计时可精确到秒

• JavaScript

下面是“一个不错的JS HTML页面倒计时可精确到秒”的完整攻略。

1.准备工作

首先，要获取当前时间和未来的结束时间，并计算出两者之间的时间间隔。为了完成这个任务，我们需要使用JavaScript中的Date对象。

// 获取当前时间
var now = new Date();
// 获取未来结束时间
var end = new Date('2021/12/31 23:59:59');
// 计算间隔时间
var leftTime = end.getTime() - now.getTime();

上面的代码中，我们使用了new Date()来获取当前时间和未来的结束时间，getTime()用来计算时间戳差值，得到两者之间的时间间隔。

2.计算时间差

接下来，我们需要将时间间隔转换成日、小时、分钟和秒。使用下面的代码可以实现：

// 获取各个时间单位的值
var days = parseInt(leftTime / 1000 / 60 / 60 / 24);
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24);
var minutes = parseInt(leftTime / 1000 / 60 % 60);
var seconds = parseInt(leftTime / 1000 % 60);

上面的代码中，我们使用parseInt()函数将时间间隔转换成整数，然后根据时间间隔计算出相应的时间单位的值。比如hours变量得出的值是距离结束时间还有多少小时。

3.更新倒计时

最后一步是将倒计时的时间更新到页面上。下面是一个简单的HTML模板，用来展示倒计时。

<!-- 倒计时展示区域 -->
<div id="countdown">
  <div class="countdown-item">
    <span class="countdown-item-num" id="countdown-days">0</span>
    <span class="countdown-item-text">天</span>
  </div>
  <div class="countdown-item">
    <span class="countdown-item-num" id="countdown-hours">0</span>
    <span class="countdown-item-text">时</span>
  </div>
  <div class="countdown-item">
    <span class="countdown-item-num" id="countdown-minutes">0</span>
    <span class="countdown-item-text">分</span>
  </div>
  <div class="countdown-item">
    <span class="countdown-item-num" id="countdown-seconds">0</span>
    <span class="countdown-item-text">秒</span>
  </div>
</div>

上面的HTML代码中，我们使用了四个span标签，分别用来展示倒计时的天、小时、分钟和秒。接下来的代码片段将时间值更新到上述四个span标签上。

// 将时间值更新到页面上
document.getElementById('countdown-days').innerHTML = days;
document.getElementById('countdown-hours').innerHTML = hours;
document.getElementById('countdown-minutes').innerHTML = minutes;
document.getElementById('countdown-seconds').innerHTML = seconds;

4.示例说明

下面是两个示例说明，用来展示如何将上述代码实现到具体的页面中。

示例1：简单的倒计时展示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>简单的倒计时展示</title>
</head>
<body>
  <!-- 倒计时展示区域 -->
  <div id="countdown">
    <div class="countdown-item">
      <span class="countdown-item-num" id="countdown-days">0</span>
      <span class="countdown-item-text">天</span>
    </div>
    <div class="countdown-item">
      <span class="countdown-item-num" id="countdown-hours">0</span>
      <span class="countdown-item-text">时</span>
    </div>
    <div class="countdown-item">
      <span class="countdown-item-num" id="countdown-minutes">0</span>
      <span class="countdown-item-text">分</span>
    </div>
    <div class="countdown-item">
      <span class="countdown-item-num" id="countdown-seconds">0</span>
      <span class="countdown-item-text">秒</span>
    </div>
  </div>

  <script>
    // 获取当前时间
    var now = new Date();
    // 获取未来结束时间
    var end = new Date('2021/12/31 23:59:59');
    // 计算间隔时间
    var leftTime = end.getTime() - now.getTime();
    // 获取各个时间单位的值
    var days = parseInt(leftTime / 1000 / 60 / 60 / 24);
    var hours = parseInt(leftTime / 1000 / 60 / 60 % 24);
    var minutes = parseInt(leftTime / 1000 / 60 % 60);
    var seconds = parseInt(leftTime / 1000 % 60);
    // 将时间值更新到页面上
    document.getElementById('countdown-days').innerHTML = days;
    document.getElementById('countdown-hours').innerHTML = hours;
    document.getElementById('countdown-minutes').innerHTML = minutes;
    document.getElementById('countdown-seconds').innerHTML = seconds;
    // 每隔一秒更新一次倒计时
    setInterval(function () {
      // 获取当前时间
      var now = new Date();
      // 获取未来结束时间
      var end = new Date('2021/12/31 23:59:59');
      // 计算间隔时间
      var leftTime = end.getTime() - now.getTime();
      // 获取各个时间单位的值
      var days = parseInt(leftTime / 1000 / 60 / 60 / 24);
      var hours = parseInt(leftTime / 1000 / 60 / 60 % 24);
      var minutes = parseInt(leftTime / 1000 / 60 % 60);
      var seconds = parseInt(leftTime / 1000 % 60);
      // 将时间值更新到页面上
      document.getElementById('countdown-days').innerHTML = days;
      document.getElementById('countdown-hours').innerHTML = hours;
      document.getElementById('countdown-minutes').innerHTML = minutes;
      document.getElementById('countdown-seconds').innerHTML = seconds;
    }, 1000); // 每隔一秒更新一次
  </script>
</body>
</html>

在上面的代码中，我们使用了setInterval()函数，每隔一秒钟自动更新一次倒计时。

示例2：滚动带动态效果的倒计时展示

下面是实现滚动带动态效果的倒计时展示。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>滚动带动态效果的倒计时展示</title>
  <style>
    #countdown {
      height: 80px;
      overflow: hidden;
      background-color: #f5f5f5;
      position: relative;
    }
    .countdown-item {
      width: 10%;
      height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      background-color: #fff;
      box-shadow: inset 0 0 3px #ccc;
      transition: all .3s ease;
    }
    .countdown-item:first-child {
      left: 0;
    }
    .countdown-item:nth-child(2) {
      left: 10%;
    }
    .countdown-item:nth-child(3) {
      left: 20%;
    }
    .countdown-item:nth-child(4) {
      left: 30%;
    }
    .countdown-item:nth-child(5) {
      left: 40%;
    }
    .countdown-item:nth-child(6) {
      left: 50%;
    }
    .countdown-item:nth-child(7) {
      left: 60%;
    }
    .countdown-item:nth-child(8) {
      left: 70%;
    }
    .countdown-item:nth-child(9) {
      left: 80%;
    }
    .countdown-item:last-child {
      right: 0;
    }
    .countdown-item-num {
      font-size: 40px;
      display: block;
      line-height: 80px;
      text-align: center;
      color: #007bff;
    }
    .countdown-item-text {
      font-size: 14px;
      color: #333;
      text-align: center;
      margin-top: 10px;
      display: block;
    }
  </style>
</head>
<body>
  <!-- 倒计时展示区域 -->
  <div id="countdown">
    <div class="countdown-item">
      <span class="countdown-item-num" id="countdown-days"></span>
      <span class="countdown-item-text">天</span>
    </div>
    <div class="countdown-item">
      <span class="countdown-item-num" id="countdown-hours"></span>
      <span class="countdown-item-text">时</span>
    </div>
    <div class="countdown-item">
      <span class="countdown-item-num" id="countdown-minutes"></span>
      <span class="countdown-item-text">分</span>
    </div>
    <div class="countdown-item">
      <span class="countdown-item-num" id="countdown-seconds"></span>
      <span class="countdown-item-text">秒</span>
    </div>
    <div class="countdown-item"></div>
    <div class="countdown-item"></div>
    <div class="countdown-item"></div>
    <div class="countdown-item"></div>
    <div class="countdown-item"></div>
  </div>

  <script>
    // 获取当前时间
    var now = new Date();
    // 获取未来结束时间
    var end = new Date('2021/12/31 23:59:59');
    // 计算间隔时间
    var leftTime = end.getTime() - now.getTime();
    // 更新倒计时
    updateCountdown(leftTime);
    // 每隔一秒自动更新倒计时
    setInterval(function () {
      // 获取当前时间
      var now = new Date();
      // 计算间隔时间
      var leftTime = end.getTime() - now.getTime();
      // 更新倒计时
      updateCountdown(leftTime);
    }, 1000);

    // 更新倒计时
    function updateCountdown(leftTime) {
      // 获取各个时间单位的值
      var days = parseInt(leftTime / 1000 / 60 / 60 / 24);
      var hours = parseInt(leftTime / 1000 / 60 / 60 % 24);
      var minutes = parseInt(leftTime / 1000 / 60 % 60);
      var seconds = parseInt(leftTime / 1000 % 60);
      // 将时间值更新到页面上
      document.getElementById('countdown-days').innerHTML = formatNumber(days);
      document.getElementById('countdown-hours').innerHTML = formatNumber(hours);
      document.getElementById('countdown-minutes').innerHTML = formatNumber(minutes);
      document.getElementById('countdown-seconds').innerHTML = formatNumber(seconds);
      // 更新滚动动画
      updateAnimate();
    }

    // 更新滚动动画
    function updateAnimate() {
      var items = document.querySelectorAll('.countdown-item');
      items.forEach(function (item) {
        item.style.transform = '';
        var numEl = item.querySelector('.countdown-item-num');
        var num = parseInt(numEl.innerHTML);
        var height = item.offsetHeight;
        numEl.style.transform = 'translateY(' + (-num * height) + 'px)';
      });
    }

    // 数据格式化，将一位数值前补0
    function formatNumber(num) {
      return num < 10 ? '0' + num : num;
    }
  </script>
</body>
</html>

在上面的代码中，我们使用了CSS样式来将倒计时表示成一个滚动带动态效果的倒计时展示。在JavaScript中，我们用了两个函数：updateCountdown()和updateAnimate()来实现每秒钟更新倒计时和滚动动画的效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：一个不错的js html页面倒计时可精确到秒 - Python技术站

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

相关文章

  • 改版了网上的一个js操作userdata

    改版了网上的一个js操作userdata，意味着我们要掌握如何在 JavaScript 中使用 localStorage API 操作本地存储空间。下面将从以下四个方面讲解完整攻略： localStorage 的概念和用法 基础操作：setItem 和 getItem 复杂数据结构的存储和读取 注意事项 1. localStorage 的概念和用法 loca…

    JavaScript 2023年6月11日
    00

  • JS日期控件My97DatePicker基本用法

    以下是JS日期控件My97DatePicker基本用法的完整攻略。 一、My97DatePicker是什么 My97DatePicker是一款轻便好用的日期控件，可以自由定制样式，并支持所有主流的浏览器。 二、基本用法 1. 引入My97DatePicker 在文档的标签中插入以下代码，即可引入My97DatePicker： <link rel=&qu…

    JavaScript 2023年5月27日
    00

  • JavaScript利用Canvas实现粒子动画倒计时

    现在我将为您介绍如何利用JavaScript及Canvas实现粒子动画倒计时的完整攻略。 一、实现思路 首先，我们需要明确的是，这个倒计时动画的效果是基于Canvas来实现的，而Canvas又是基于JavaScript语言进行操作的。因此，我们需要明确以下几点： 倒计时的时间需要通过JavaScript来设定与计算； 粒子效果需要通过Canvas来创建； 粒…

    JavaScript 2023年6月10日
    00

  • vue跳转方式（打开新页面）及传参操作示例

    下面是一份详细的关于Vue跳转方式及传参操作的攻略。 Vue 跳转方式 在Vue中，可以通过 <router-link> 或 $router.push() 的方式进行页面跳转。 router-link <router-link> 是Vue-Router提供的路由导航组件，可以通过 to 属性指定要跳转的路由地址。 语法如下： <…

    JavaScript 2023年6月11日
    00

  • 在HTML中嵌入JS代码的3种方式总结

    让我来为您详细讲解如何在HTML中嵌入JS代码的3种方式： 1. 在HTML中使用<script>标签 在HTML页面中，我们可以使<script>标签嵌入JavaScript代码。使用方法如下： <!DOCTYPE html> <html> <head> <title>使用<sc…

    JavaScript 2023年5月27日
    00

  • 开发用到的js封装方法（20种）

    下面是针对这个主题的完整攻略： 简介 在开发过程中，常常会使用到一些封装好的 JavaScript 方法，可以提高代码复用性、简化开发流程。本文总结了开发常用的 20 种 JavaScript 封装方法，希望能对大家有所帮助。 1. 数组操作 1.1. 将数组转换为对象 function arrayToObject(arr) { return arr.red…

    JavaScript 2023年5月27日
    00

  • JS操作字符串转数字的常见方法示例

    下面我来详细介绍一下JS操作字符串转数字的常见方法示例的完整攻略。 什么是JS操作字符串转数字？ 在JS中，字符串和数字是两种不同的数据类型。有时候，我们需要将字符串类型的数据转化为数字类型的数据，以便进行相关的数值计算或其他操作。 JS操作字符串转数字的常见方法 以下是JS操作字符串转数字的常见方法： 使用parseInt()方法 parseInt()方法…

    JavaScript 2023年5月28日
    00

  • JavaScript使用类似break机制中断forEach循环的方法

    在JavaScript中，一般使用forEach()方法对数组进行遍历操作。但是，如果在遍历过程中需要中断循环，类似于break操作，可以采用如下几种方式： 方式一：使用some()方法 some()方法会在数组中至少找到一个满足条件的元素时直接返回true，并中断遍历，否则返回false。因此，可以利用some()方法来达到中断forEach()循环的效果…

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