Home > Web Front-end > JS Tutorial > JavaScript Study Notes (4) Countdown Program Code_Basic Knowledge

JavaScript Study Notes (4) Countdown Program Code_Basic Knowledge

WBOY
Release: 2016-05-16 18:08:01
Original
952 people have browsed it

First look at the complete code:


[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute
]

HTML part of the code:
You can enter the countdown time in the text box. If the current time is less than the deadline, it will return normally. Otherwise, it will return the time from the deadline to now The code is as follows:




< input type="text" value="2011-06-11" id="deadline" />




javascript part of the code : The code is as follows:


function countDown(endDate) {
var now = new Date();
var deadtime = document.getElementById(endDate);
var deadline = new Date(deadtime.value);
//The difference between local time and Greenwich Mean Time (GMT) Minute difference
var timeDiff = now.getTimezoneOffset();
//There is some confusion here. If the minute difference is converted into milliseconds, it should be timeDiff*60*1000, but the data returned in this way is incorrect!
var leave = Math.abs(deadline.getTime() - now.getTime() timeDiff*60);
var minute = 1000 * 60;
var hour = minute * 60;
var day = hour * 24;
var countDay = Math.floor(leave/day);
//var countHour = Math.floor((leave - day*countDay)/hour); Two calculation ideas
var countHour = Math.floor(leave/hour - countDay*24);
var countMinute = Math.floor(leave/minute) - countDay*24*60 - countHour*60;
var countSecond = Math. floor(leave/1000) - countDay*24*60*60 - countHour*60*60 - countMinute*60;
var outStr = "";
if(deadline < now) {
outStr = "distance" deadtime.value "has" countDay "days" countHour "hour" countMinute "minutes" countSecond "seconds";
} else {
outStr = "distance" deadtime.value "still has "countDay" days" countHour "hours" countMinute "minutes" countSecond "seconds";
}
var showTime = document.getElementById("showTime");
showTime.innerHTML = outStr;
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template