rinald_未来往事

网页倒计时/网站已运行时间JS代码(收藏)

WEB前端
网页倒计时代码 倒计时代码 网站运行时间代码 网站已运行天数代码
1、jQuery.countdown插件
显示格式:50 周 01 天 07 小时 18 分 41 秒(秒为跑秒)
一个页面可以有多个倒计时实例,可以停止和开始,它没有提供太多的功能,但时间格式和输出的尺寸都可以自定义。
目前最新版v2.0.4,官方地址http://hilios.github.io/jQuery.countdown/
例如:
  1. <div id="getting-started"></div>  
  2. <script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>  
  3. <script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.0.4/dist/jquery.countdown.min.js"></script>  
  4. <script type="text/javascript">  
  5.   $('#getting-started').countdown('2016/01/01 00:00'function(event) {  
  6.     $(this).html(event.strftime('%w 周 %d 天 %H:%M:%S'));  
  7.   });  
  8. </script>  
输出结果:50 周 01 天 07 小时 18 分 41 秒

  1. <div id="clock"></div>  
  2. <script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>  
  3. <script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.0.4/dist/jquery.countdown.min.js"></script>  
  4. <script type="text/javascript">    
  5. $('#clock').countdown('2014/06/09 18:21:00'function(event) {  
  6.   $(this).html(event.strftime('%D days %H:%M:%S'));  
  7. });  
  8. </script>   
输出结果:00 days 00:08:21

  1. <div id="clock"></div>  
  2. <script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>  
  3. <script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.0.4/dist/jquery.countdown.min.js"></script>  
  4. <script type="text/javascript">    
  5. $('#clock').countdown('2014/09/09 18:21:00'function(event) {  
  6.   var totalHours = event.offset.totalDays * 24 + event.offset.hours;  
  7.     $(this).html(event.strftime(totalHours + ' 时 %M 分 %S 秒'));  
  8. });  
  9. </script>   
输出结果: 89 时 20 分 12 秒

注意:如果需要一共还有多少天数用%D,参数说明:
Y: "years"
m: "months"
w: "weeks"
d: "days"
D: "totalDays"

H: "hours"
M: "minutes"
S: "seconds"


2、显示格式:距离结束时间还有:00天05小时25分30秒(秒为跑秒)
  1. <div id="time" class="time"></div>  
  2. <script language=javascript>      
  3. function show_date_time(){     
  4.  window.setTimeout("show_date_time()", 1000);     
  5.  target=new Date(2014,0,15,17,0,0);  //注意:表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为8月,则参数应该是7。  
  6.  today=new Date();   
  7.    
  8.  timeold=(target.getTime()-today.getTime());     
  9.     
  10.  sectimeold=timeold/1000     
  11.  secondsold=Math.floor(sectimeold);     
  12.  msPerDay=24*60*60*1000     
  13.  e_daysold=timeold/msPerDay     
  14.  daysold=Math.floor(e_daysold);     
  15.  e_hrsold=(e_daysold-daysold)*24;     
  16.  hrsold=Math.floor(e_hrsold);     
  17.  e_minsold=(e_hrsold-hrsold)*60;     
  18.  minsold=Math.floor((e_hrsold-hrsold)*60);     
  19.  seconds=Math.floor((e_minsold-minsold)*60);     
  20.     
  21.   if (daysold<0) {     
  22.   document.getElementById("time").innerHTML="逾期,倒计时已经失效";     
  23. }     
  24.  else{     
  25.  if (daysold<10) {daysold="0"+daysold}     
  26.  if (hrsold<10) {hrsold="0"+hrsold}     
  27.  if (minsold<10) {minsold="0"+minsold}     
  28.  if (seconds<10) {seconds="0"+seconds}     
  29.  if (daysold>0) {     
  30.   document.getElementById("time").innerHTML="距离结束时间还有:"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";     
  31.  }     
  32.  else     
  33.   document.getElementById("time").innerHTML="<font color=red>距离结束时间还有:"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒</font>";  //结束时间小于1天,字体呈红色提醒  
  34. }     
  35. }     
  36. show_date_time();     
  37. </script>  


3、 显示格式:已运行0 年 1 天 0 小时 4 分钟 35 秒(秒为跑秒)
  1. <span id="sitetime"></span>  
  2. <script language=javascript>  
  3. function siteTime(){  
  4. window.setTimeout("siteTime()", 1000);  
  5. var seconds = 1000  
  6. var minutes = seconds * 60  
  7. var hours = minutes * 60  
  8. var days = hours * 24  
  9. var years = days * 365  
  10.   
  11. var today = new Date()  
  12. var todayYear = today.getFullYear()  
  13. var todayMonth = today.getMonth()  
  14. var todayDate = today.getDate()  
  15. var todayHour = today.getHours()  
  16. var todayMinute = today.getMinutes()  
  17. var todaySecond = today.getSeconds()  
  18.   
  19. /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)  
  20. year - 作为date对象的年份,为4位年份值 
  21. month - 0-11之间的整数,做为date对象的月份 
  22. day - 1-31之间的整数,做为date对象的天数 
  23. hours - 0(午夜24点)-23之间的整数,做为date对象的小时数 
  24. minutes - 0-59之间的整数,做为date对象的分钟数 
  25. seconds - 0-59之间的整数,做为date对象的秒数 
  26. microseconds - 0-999之间的整数,做为date对象的毫秒数 */  
  27. var t1 = Date.UTC(2014,0,14,11,19,00)  
  28. var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond)  
  29. var diff = t2-t1  
  30.   
  31. var diffYears = Math.floor(diff/years)  
  32. var diffDays = Math.floor((diff/days)-diffYears*365)  
  33. var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours)  
  34. var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes)  
  35. var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds)  
  36. document.getElementById("sitetime").innerHTML=" 已运行"+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒"  
  37. }  
  38. siteTime()  
  39. </script>  
原文作者:rinald
原文地址:http://fity.cn/post/431.html
互联网技术更新较快,本站很多文章具有实效性,我会及时更新原文,但转载的文章无法通知更新。为了不给读者造成困惑或误导,请您在转载时保留此出处信息,尊重别人也是尊重自己。

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。