Home > Web Front-end > JS Tutorial > Countdown implementation code based on jQuery_jquery

Countdown implementation code based on jQuery_jquery

WBOY
Release: 2016-05-16 17:53:06
Original
968 people have browsed it

Online demo: http://demo.jb51.net/js/2012/mydaojishi/
Package download: mydaojishi_jb51
Core code:

Copy code The code is as follows:

$(function(){
var tYear = ""; //Input The year
var tMonth = ""; //The input month
var tDate = ""; //The input date
var iRemain = ""; //The number of milliseconds between the start and the end
var sDate = ""; //Countdown days
var sHour = ""; //Countdown hours
var sMin = ""; //Countdown minutes
var sSec = " "; //Number of seconds for countdown
var sMsec = ""; //Number of milliseconds
//General tool function, add zero to the single digit, and set the number to add in front according to the passed N parameter zero
function setDig(num,n){
var str = "" num;
while(str.lengthstr="0" str
}
return str;
}
//Get the difference in days, hours, minutes, seconds
function getdate(){
//Create date objects of start time and end time
var oStartDate = new Date();
var oEndDate = new Date();
//Get the value of the text box
tYear = $("#tyear").val();
tMonth = $ ("#tmonth").val();
tDate = $("#tdate").val();
//Set the end time
oEndDate.setFullYear(parseInt(tYear));
oEndDate.setMonth(parseInt(tMonth)-1);
oEndDate.setDate(parseInt(tDate));
oEndDate.setHours(0);
oEndDate.setMinutes(0);
oEndDate.setSeconds(0);
//Find the seconds of the start and end time (divided by 1000)
iRemain = (oEndDate.getTime() - oStartDate.getTime())/1000;
//The total number of seconds is divided by the number of seconds in a day, and then the integer part is taken out to get the number of days.
sDate = setDig(parseInt(iRemain/(60*60*24)),3);
//Divide the total number of seconds by the number of seconds in a day, and then take the remainder, that is, deduct the integer number of days After that, the total number of seconds remaining.
iRemain %= 60*60*24;
//Divide the total number of seconds remaining by the number of seconds in an hour, and then take the integer part to get the number of hours.
sHour = setDig(parseInt(iRemain/(60*60)),2)
//The remaining total seconds are divided by the number of seconds in an hour, and then the remainder is taken. This remainder is the hour deducted After this, the total number of seconds remaining.
iRemain %= 60*60;
//Divide the total number of seconds remaining by the number of seconds in a minute, and then take the integer part to get the number of minutes.
sMin = setDig(parseInt(iRemain/60),2)
//The total number of seconds remaining is divided by the number of seconds in a minute, and then the remainder is taken. This remainder is the remainder after deducting the minutes. total number of seconds.
iRemain%=60;
//Seconds remaining
sSec = setDig(iRemain,2);
//Number of milliseconds
sMsec = sSec*100;
}
//Change the displayed time
function updateShow(){
$(".showdate span").text(tYear "-" tMonth "-" tDate);
$(".count span").each(function(index, element) {
if(index==0){
$(this).text(sDate);
}else if(index==1){
$(this).text(sHour);
}else if(index == 2){
$(this).text(sMin);
}else if(index == 3 ){
$(this).text(sSec);
}else if(index == 4){
$(this).text(sMsec);
}
}) ;
}
//Perform time update every second
function autoTime(){
getdate();
//If less than zero, clear call itself and return
if(iRemain<0){
clearTimeout(setT);
return;
}
updateShow();
var setT = setTimeout(autoTime,1000);
}
//Click the button to start timing
$("button").click(function(){
autoTime();
})
})


Record points that need attention:

1. Modulo operation:

iRemain %= 60*60*24;
is to return the remainder. In this example, the remainder is The number of seconds remaining after taking away the integer.

2. Tool function setDig(num,n) can automatically add zero in front of the number passed in according to the passed parameters.
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