Date对象怎么做出倒计时功能-js教程-PHP中文网

首页

web前端

js教程

Date对象怎么做出倒计时功能

php中世界最好的语言

Apr 16, 2018 pm 01:42 PM

date 倒计时

这次给大家带来Date对象怎么做出倒计时功能，Date对象做出倒计时功能的注意事项有哪些，下面就是实战案例，一起来看一下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒计时动画</title>
  <style>
    p{
      text-align:center;
      height:100px;
      line-height:100px;
    }
  </style>
  <script>
    window.onload = function(){
      setInterval(FreeTime,1000);
    }
    function FreeTime(){
      var curTime = Date.now();
      var endTime = new Date("2017-10-26 16:00:00");
      var allFreeSeconds = (endTime-curTime)/1000;
      if(allFreeSeconds>0){
        var freeDay = Math.floor(allFreeSeconds/(24*60*60));
        var freeHour = Math.floor(allFreeSeconds/(60*60) % 24);
        var freeMinute = Math.floor(allFreeSeconds/60 % 60);
        var freeSecond = Math.floor(allFreeSeconds%60);
        document.getElementById("nowTime").innerHTML = "剩余"+freeDay+"天"+freeHour+"时"+freeMinute+"分"+freeSecond+"秒";
      }
      else{
        document.getElementById("nowTime").innerHTML = "已结束";
      }
    }
  </script>
</head>
<body>
<p>
  <span id="nowTime"></span>
</p>
</body>
</html>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7493

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何通过C++编写一个简单的倒计时程序？ Nov 03, 2023 pm 01:39 PM

C++是一种广泛使用的编程语言，在编写倒计时程序方面非常方便和实用。倒计时程序是一种常见的应用，它能为我们提供非常精确的时间计算和倒计时功能。本文将介绍如何使用C++编写一个简单的倒计时程序。实现倒计时程序的关键就是使用计时器来计算时间的流逝。在C++中，我们可以使用time.h头文件中的函数来实现计时器的功能。下面是一个简单的倒计时程序的代码

如何使用Vue实现按钮倒计时特效 Sep 21, 2023 pm 02:03 PM

如何使用Vue实现按钮倒计时特效随着Web应用程序的日益普及，我们经常需要在用户与页面进行交互时使用一些动态效果来提升用户体验。其中，按钮的倒计时特效是非常常见且实用的一种效果。本文将介绍如何使用Vue框架来实现按钮倒计时特效，并给出具体的代码示例。首先，我们需要创建一个Vue组件，包含一个按钮和倒计时的功能。在Vue中，组件是一种可复用的Vue实例，视图会

PHP Warning: date() expects parameter 2 to be long, string given的解决方法 Jun 22, 2023 pm 08:03 PM

在使用PHP程序开发时，经常会碰到一些警告或者错误的提示信息。其中，可能出现的一个错误提示就是：PHPWarning:date()expectsparameter2tobelong,stringgiven。这个错误的提示信息意思是：函数date()的第二个参数期望是长整型（long），但是实际传递给它的是字符串（string）。那么，我们

如何根据当前时间戳创建文件/文件夹并为其命名 Apr 27, 2023 pm 11:07 PM

如果您正在寻找根据系统时间戳自动创建文件和文件夹并为其命名的方法，那么您来对地方了。有一种超级简单的方法可以用来完成这项任务。然后，创建的文件夹或文件可用于各种目的，例如存储文件备份、根据日期对文件进行排序等。在本文中，我们将通过一些非常简单的步骤解释如何在Windows11/10中自动创建文件和文件夹，并根据系统的时间戳对其进行命名。使用的方法是批处理脚本，非常简单。希望你喜欢阅读这篇文章。第1节：如何根据系统当前时间戳自动创建文件夹并命名第1步：首先，导航到要在其中创建文件夹的父文件夹，

win10开机10秒倒计时怎么取消? Win10取消开机倒计时的三种方法 Feb 29, 2024 pm 07:25 PM

在win10中，开机倒数默认是启用的。当我们在开机之后，会看到一个倒数计时的界面，通常是10秒的倒数。在这个时间之内，我们可以选择是否继续开机或者进行一些其它的操作。虽然开机倒数为我们的系统带来了些许便利，但在一些情况下也可能带来麻烦。想取消显示，但是不知道怎么操作，这篇文章是本站给大家带来的Win10开机几秒倒计时取消方法。了解win10开机倒数在win10中，开机倒数默认是启用的。当我们在开机之后，会看到一个倒数计时的界面，通常是10秒的倒数。在这个时间之内，我们可以选择是否继续开机或者进行

Java中使用Date和SimpleDateFormat类来处理时间的方法及用法介绍 Apr 21, 2023 pm 03:01 PM

一.介绍java.util包中的Date类表示特定的时间，精确到毫秒。如果要想使用我们的Date类，那么我们必须得引入我们的Date类。Date类直接写入年份是得不到正确的结果的。因为java中Date是从1900年开始算的，所以前面的第一个参数只要填入从1900年后过了多少年就是你想要得到的年份。月需要减1，日可以直接插入。这种方法用的比较少，常用的是第二种方法。这种方法是将一个符合特定格式，比如yyyy-MM-dd,的字符串转化成为Date类型的数据。首先，定义一个Date类型的对象Date

如何使用Date类的getTime()方法获取日期的毫秒表示形式 Jul 24, 2023 am 11:42 AM

如何使用Date类的getTime()方法获取日期的毫秒表示形式在Java中，Date类是用于表示日期和时间的类。它提供了许多有用的方法来操作和获取日期对象的信息。其中，getTime()方法是Date类中的一个重要方法，它可以返回日期对象的毫秒表示形式。接下来，我们将详细介绍如何使用这个方法来获取日期的毫秒表示形式，并提供相应的代码示例。使用Date类的g

如何使用CSS制作倒计时效果的实现步骤 Oct 26, 2023 am 10:36 AM

如何使用CSS制作倒计时效果的实现步骤倒计时效果是网页开发中常见的一个功能，可以为用户呈现倒计时的动态效果，给人以紧迫感和期待感。本文将介绍如何使用CSS来实现倒计时效果，并给出详细的实现步骤和代码示例。实现步骤如下：步骤一：HTML结构搭建首先，在HTML中创建一个div容器，用于包裹倒计时的内容。例如：<divclass="countd

See all articles

Date对象怎么做出倒计时功能

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题