Jquery displays a timer of * days * hours * minutes * seconds

  • 2020-03-30 02:50:05
  • OfStack

1. Using jquery to implement the time timer, how many days, hours, minutes and seconds from the previous time period to the present?

HTML code:
 
<div id="times_wrap" class="time_num"> 
 Time from now:  
<div class="time_w"> 
<span id="time_d" class="time"> </span > day  
<span id="time_h" class="time"> </span > when  
<span id="time_m" class="time"> </span > points  
<span id="time_s" class="time"> </span > seconds  
</div> 
</div> 

<script type="text/javascript"> 
$(function(){ 

show_time(); 

}); 

function show_time(){ 
var time_start = new Date("2013/10/01 00:00:00").getTime();//Set the start time
var time_end = new Date().getTime(); //Set the end time (equal to the current system time)
//Calculated time difference
var time_distance = time_end - time_start; 
if(time_distance > 0){ 
//Conversion of celestial minutes and seconds
var int_day = Math.floor(time_distance/86400000) 
time_distance -= int_day * 86400000; 

var int_hour = Math.floor(time_distance/3600000) 
time_distance -= int_hour * 3600000; 

var int_minute = Math.floor(time_distance/60000) 
time_distance -= int_minute * 60000; 

var int_second = Math.floor(time_distance/1000) 
//When minutes and seconds are singular, add zero in front
if(int_day < 10){ 
int_day = "0" + int_day; 
} 
if(int_hour < 10){ 
int_hour = "0" + int_hour; 
} 
if(int_minute < 10){ 
int_minute = "0" + int_minute; 
} 
if(int_second < 10){ 
int_second = "0" + int_second; 
} 
//Show time
$("#time_d").html(int_day); 
$("#time_h").html(int_hour); 
$("#time_m").html(int_minute); 
$("#time_s").html(int_second); 

setTimeout("show_time()",1000); 

}else{ 
$("#time_d").html('00'); 
$("#time_h").html('00'); 
$("#time_m").html('00'); 
$("#time_s").html('00'); 

} 
} 
</script> 

Related articles: