Js to achieve the page countdown the website has run time function code 3 cases

  • 2020-03-30 02:39:02
  • OfStack

1. JQuery. Countdown plug-in

Display format: 50 weeks, 01 days, 07 hours, 18 minutes, 41 seconds (seconds are running seconds)
A page can have multiple countdown instances, can be stopped and started, it does not provide much functionality, but the time format and the size of the output can be customized.
At present the latest version of v2.0.2, official address at http://hilios.github.io/jQuery.countdown/
Such as:


<div id="getting-started"></div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://hilios.github.io/jQuery.countdown/javascripts/jquery.countdown.min.js"></script>
<script type="text/javascript">
  $('#getting-started').countdown('2016/01/01 00:00', function(event) {
    $(this).html(event.strftime('%w  weeks  %d  day  %H:%M:%S'));
  });
</script>

Output: 50 weeks, 01 days, 07 hours, 18 minutes, 41 seconds

Note: if the total number of days is needed, use %D, parameter description:


Y: "years"
m: "months"
w: "weeks"
d: "days"
D: "totalDays"
H: "hours"
M: "minutes"
S: "seconds"

2. Display format: to the end time: 00 days, 05 hours, 25 minutes, 30 seconds (seconds are running seconds)


<div id="time" class="time"></div>
<script language=javascript>    
function show_date_time(){   
 window.setTimeout("show_date_time()", 1000);   
 target=new Date(2014,0,15,17,0,0);  //Note: the parameters for the month range from 0 to 11. That is, if you want to set the month to August, the parameter should be 7.
 today=new Date(); 

 timeold=(target.getTime()-today.getTime());   

 sectimeold=timeold/1000   
 secondsold=Math.floor(sectimeold);   
 msPerDay=24*60*60*1000   
 e_daysold=timeold/msPerDay   
 daysold=Math.floor(e_daysold);   
 e_hrsold=(e_daysold-daysold)*24;   
 hrsold=Math.floor(e_hrsold);   
 e_minsold=(e_hrsold-hrsold)*60;   
 minsold=Math.floor((e_hrsold-hrsold)*60);   
 seconds=Math.floor((e_minsold-minsold)*60);   

  if (daysold<0) {   
  document.getElementById("time").innerHTML=" Within the time limit , The countdown has expired. ";   
}   
 else{   
 if (daysold<10) {daysold="0"+daysold}   
 if (hrsold<10) {hrsold="0"+hrsold}   
 if (minsold<10) {minsold="0"+minsold}   
 if (seconds<10) {seconds="0"+seconds}   
 if (daysold>0) {   
  document.getElementById("time").innerHTML=" Time to finish: "+daysold+" day "+hrsold+" hours "+minsold+" points "+seconds+" seconds ";   
 }   
 else   
  document.getElementById("time").innerHTML="<font color=red> Time to finish: "+daysold+" day "+hrsold+" hours "+minsold+" points "+seconds+" seconds </font>";  //The end time is less than 1 day, and the font is red
}   
}   
show_date_time();   
</script>

3. Display format: it has been running for 0 years, 1 day, 0 hours, 4 minutes and 35 seconds (seconds are running seconds)


<span id="sitetime"></span>
<script language=javascript>
function siteTime(){
window.setTimeout("siteTime()", 1000);
var seconds = 1000
var minutes = seconds * 60
var hours = minutes * 60
var days = hours * 24
var years = days * 365
var today = new Date()
var todayYear = today.getFullYear()
var todayMonth = today.getMonth()
var todayDate = today.getDate()
var todayHour = today.getHours()
var todayMinute = today.getMinutes()
var todaySecond = today.getSeconds()

var t1 = Date.UTC(2014,0,14,11,19,00)
var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond)
var diff = t2-t1
var diffYears = Math.floor(diff/years)
var diffDays = Math.floor((diff/days)-diffYears*365)
var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours)
var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes)
var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds)
document.getElementById("sitetime").innerHTML="  Has been running "+diffYears+"  years  "+diffDays+"  day  "+diffHours+"  hours  "+diffMinutes+"  minutes  "+diffSeconds+"  seconds "
}
siteTime()
</script>


Related articles: