·您当前的位置:主页 > 技术教程 > JavaScript >

[js]js写页面倒计时效果源代码范例

时间:2017-09-04 11:27酷播
[js]js写页面倒计时效果源代码范例

[js]js写页面倒计时效果源代码范例

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>倒计时函数</title> 
  6.     <script> 
  7.     var timer=(function(){ 
  8.         return function (json){ 
  9.             if(json.currentTime){ 
  10.                 var now=new Date(); 
  11.                 var year=now.getFullYear();//返回年份(4位数字) 
  12.                 var month=now.getMonth()+1;//返回月份(0-11,所以+1) 
  13.                 var day=now.getDate();//返回某天(1-31) 
  14.                 var h=now.getHours();//返回小时(0-23) 
  15.                 var m=now.getMinutes();//返回分钟(0-59) 
  16.                 var s=now.getSeconds();//返回秒数(0-59) 
  17.                 //补O 
  18.                 mm=m<10?'0'+m:m; 
  19.                 ss=s<10?'0'+s:s; 
  20.                 var weekday=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; 
  21.                 document.getElementById(json.objId).innerHTML=year+'年'+month+'月'+day+'日'+weekday[now.getDay()]+'   '+h+':'+m+':'+s; 
  22.                 setTimeout(function(){timer(json)},1000); 
  23.             }else{ 
  24.                 var endtime=new Date(json.endtime);//结束时间 
  25.                 var nowtime = new Date();//当前时间 
  26.                 var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); //计算差的秒数 
  27.                 //一天24小时  一小时60分钟  一分钟60秒 
  28.                 d=parseInt(lefttime/3600/24); 
  29.                 h=parseInt((lefttime/3600)%24); 
  30.                 m=parseInt((lefttime/60)%60); 
  31.                 s=parseInt(lefttime%60); 
  32.                 document.getElementById(json.objId).innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒"; 
  33.                 if(lefttime>0){setTimeout(function(){timer(json)},1000);} 
  34.             } 
  35.         } 
  36.     })() 
  37.          
  38.         window.onload=function(){ 
  39.             timer({ 
  40.                 currentTime:true, 
  41.                 objId:'thisTime' 
  42.             }) 
  43.             timer({ 
  44.                 objId:'countDown', 
  45.                 endtime:"2016/9/1,18:00" 
  46.             }) 
  47.         } 
  48.     </script> 
  49. </head> 
  50. <body> 
  51.     <b>当前时间:</b> <span id="thisTime"></span><br/><br/> 
  52.     <b>距离2016/9/1 18:00还有:</b> <span id="countDown"></span> 
  53. </body> 
  54. </html> 

 

微信付费直播
酷播云免费在线视频整体解决方案
参与开学季云视频优惠,拿GET2017教育科技大会VIP门票
进入开学季,保利威视推出云视频优惠,云视频套餐、流量超实惠大放“价”就是现在,还可以免费获取GET2017教育科技大会VIP门票哦!