How to create countdown function on Date object
This time I will show you how to make a Date objectCountdown function, what are the precautions for making a Date object countdown function, the following is a practical case, one Get up and take a look.
<!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>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How SpringJDBC operates data in batches
How el-upload uploads Excel files
The above is the detailed content of How to create countdown function on Date object. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1376
52
How to write a simple countdown program in C++?
Nov 03, 2023 pm 01:39 PM
C++ is a widely used programming language that is very convenient and practical in writing countdown programs. Countdown program is a common application that can provide us with very precise time calculation and countdown functions. This article will introduce how to use C++ to write a simple countdown program. The key to implementing a countdown program is to use a timer to calculate the passage of time. In C++, we can use the functions in the time.h header file to implement the timer function. The following is the code for a simple countdown program
How to use Vue to implement button countdown effects
Sep 21, 2023 pm 02:03 PM
How to use Vue to implement button countdown effects With the increasing popularity of web applications, we often need to use some dynamic effects to improve user experience when users interact with the page. Among them, the countdown effect of the button is a very common and practical effect. This article will introduce how to use the Vue framework to implement button countdown effects and give specific code examples. First, we need to create a Vue component that contains a button and countdown function. In Vue, a component is a reusable Vue instance, and a view will
PHP Warning: date() expects parameter 2 to be long, string given solution
Jun 22, 2023 pm 08:03 PM
When developing using PHP programs, you often encounter some warning or error messages. Among them, one error message that may appear is: PHPWarning:date()expectsparameter2tobelong,stringgiven. The error message means: the second parameter of the function date() is expected to be a long integer (long), but what is actually passed to it is a string (string). So, we
How to create and name a file/folder based on current timestamp
Apr 27, 2023 pm 11:07 PM
If you're looking for a way to automatically create and name files and folders based on system timestamps, you've come to the right place. There is a super simple way to accomplish this task. The created folders or files can then be used for various purposes such as storing file backups, sorting files based on date, etc. In this article, we will explain in some very simple steps how to automatically create files and folders in Windows 11/10 and name them according to the system’s timestamp. The method used is a batch script, which is very simple. Hope you enjoyed reading this article. Section 1: How to automatically create and name a folder based on the current timestamp of the system Step 1: First, navigate to the parent folder where you want to create the folder,
How to cancel the 10-second countdown on booting up Win10? Three ways to cancel the countdown on booting up Win10
Feb 29, 2024 pm 07:25 PM
In win10, the boot countdown is enabled by default. When we turn on the computer, we will see a countdown interface, usually a 10-second countdown. Within this time, we can choose whether to continue booting or perform some other operations. Although the boot countdown brings some convenience to our system, it may also cause trouble in some cases. I want to cancel the display, but I don’t know how to do it. This article brings you how to cancel the countdown of several seconds after booting up Win10. Understand the win10 boot countdown. In win10, the boot countdown is enabled by default. When we turn on the computer, we will see a countdown interface, usually a 10-second countdown. Within this time, we can choose whether to continue booting or proceed
Introduction to methods and usage of using Date and SimpleDateFormat classes to process time in Java
Apr 21, 2023 pm 03:01 PM
1. Introduction The Date class in the java.util package represents a specific time, accurate to milliseconds. If we want to use our Date class, then we must introduce our Date class. Writing the year directly into the Date class will not produce the correct result. Because Date in Java is calculated from 1900, so as long as you fill in the first parameter with the number of years since 1900, you will get the year you want. The month needs to be subtracted by 1, and the day can be inserted directly. This method is rarely used, and the second method is commonly used. This method is to convert a string that conforms to a specific format, such as yyyy-MM-dd, into Date type data. First, define an object of Date type Date
How to use CSS to create a countdown effect
Oct 26, 2023 am 10:36 AM
How to use CSS to create a countdown effect. The countdown effect is a common function in web development. It can provide users with a dynamic effect of countdown and give people a sense of urgency and expectation. This article will introduce how to use CSS to achieve the countdown effect, and give detailed implementation steps and code examples. The implementation steps are as follows: Step 1: HTML structure construction First, create a div container in HTML to wrap the countdown content. For example: <divclass="countd
How to get the millisecond representation of a date using the getTime() method of the Date class
Jul 24, 2023 am 11:42 AM
How to get millisecond representation of date using getTime() method of Date class In Java, Date class is a class used to represent date and time. It provides many useful methods to manipulate and obtain information about date objects. Among them, the getTime() method is an important method in the Date class, which can return the millisecond representation of the date object. Next, we will detail how to use this method to obtain the millisecond representation of a date, and provide corresponding code examples. Using the Date class
