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

下面是“一个不错的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)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 基于jQuery的一个扩展form序列化到json对象

    下面是基于jQuery的一个扩展form序列化到json对象的完整攻略: 什么是jQuery的form序列化? jQuery的form序列化主要是将HTML表单中的数据(包括input、textarea、select等表单元素)封装成一个字符串,以便可以轻松地提交给服务器进行处理。 为什么需要扩展form序列化为json对象? jQuery的form序列化默…

    JavaScript 2023年5月27日
    00
  • DOM基础教程之事件对象

    首先我们需要知道什么是DOM,它是文档对象模型(Document Object Model)的缩写,是W3C组织推荐的处理HTML和XML文档的标准API。在HTML中,DOM用于访问和操作文档中的元素。而在JavaScript中,DOM则是访问和操作HTML元素的标准方式。 DOM的事件机制是一种事件触发和事件处理的机制。一个事件通常是用户交互产生的,例如…

    JavaScript 2023年6月10日
    00
  • javascript实现视频弹幕效果(两个版本)

    Javascript实现视频弹幕效果攻略 1. 引言 弹幕是指用户在观看视频时,能够发送一些评论消息,这些评论消息会以滚动、飘动、静态等形式浮现在视频画面上方。在现在各大视频平台上,弹幕已成为视频观看的一种重要要素。 本篇攻略将从两个版本的弹幕效果的具体实现入手,来详细讲解JavaScript实现弹幕效果的过程。 2. 版本一 2.1 函数封装 本案例中主要…

    JavaScript 2023年6月10日
    00
  • JavaScript高级教程之如何玩转箭头函数

    JavaScript高级教程之如何玩转箭头函数 介绍 箭头函数是ES6引入的新概念,它可以更方便地创建匿名函数,比传统的函数表达式更加简洁。本文将介绍箭头函数的使用,包括语法、应用场景、this指向和与传统函数表达式等的区别。 语法 箭头函数的语法如下: (param1, param2, …, paramN) => { statements } 或 (…

    JavaScript 2023年5月27日
    00
  • javascript高级程序设计(第三版)学习笔记(一) 正则表达式整理

    首先,需要解释一下该学习笔记的主题——正则表达式。 正则表达式 正则表达式,又称为“正则式”、“规则表达式”、“正规表达式”,是一种针对某种模式(字符串)进行匹配的工具。它通常被应用于字符串搜索、替换和拆分等场景。 正则表达式语法 正则表达式有自己独特的语法和规则,以下是一些常见的语法以及它们的意义: /pattern/:表示一个正则表达式模式,将被用于字符…

    JavaScript 2023年5月28日
    00
  • javascript针对DOM的应用分析(二)

    JavaScript针对DOM的应用分析 在使用JavaScript时,操作DOM是很重要的一部分。在本攻略中,我们将详细讨论JavaScript如何应用于DOM。 DOM基础知识 DOM(Document Object Model,文档对象模型)是指用于 HTML 和 XML 文档的编程接口。DOM 将整个页面抽象为一个树形结构,页面中的每个组成部分都是树…

    JavaScript 2023年6月10日
    00
  • JS如何把字符串转换成json

    将字符串转换成JSON格式的数据是JavaScript中一种非常常见的操作,通常是用来将服务器端的数据转换成JavaScript能够使用的方式。以下是将字符串转换成JSON数据的完整攻略: 1. 使用JSON.parse方法 JSON.parse()方法可以将一个JSON字符串转换成相应的JavaScript对象。 const jsonString = ‘{…

    JavaScript 2023年5月27日
    00
  • js HTML DOM EventListener功能与用法实例分析

    JS HTML DOM EventListener是前端Web开发中常用的功能之一,用于在指定的HTML元素上监听各种不同类型的事件。接下来,本文将为您详细讲解“js HTML DOM EventListener的功能与用法实例分析”。 一、EventListner概念 事件监听器(EventListener)是一种用于监听HTML元素事件的API。 事件是…

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