JavaScript实现倒计时代码段Item1(非常实用)_javascript技巧

JavaScript实现倒计时代码段Item1(非常实用)_javascript技巧,第1张

现今团购网、电商网、门户网等,常使用时间记录重要的时刻,如时间显示、倒计时差、限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果。


1、简单时间显示

讲解日期对象Date,并通过该对象获取时、分、秒等,让你自由提取所需时间内容。





 获取时间
 
 window.onload = function(){
  showTime();
 }
 function showTime(){
  var myDate = new Date();
  var year = myDate.getFullYear();
  var month = myDate.getMonth() + 1;
  var date = myDate.getDate();
  var dateArr = ["日","一",'二','三','四','五','六'];
  var day = myDate.getDay();
  var hours = myDate.getHours();
  var minutes = formatTime(myDate.getMinutes());
  var seconds = formatTime(myDate.getSeconds());
  var systemTime = document.getElementById("time");
  systemTime.innerHTML = " " + year + "年" + month +"月" + date + "日" + " 星期" + dateArr[day] + " " + hours + ":" + minutes + ":" + seconds;
  setTimeout("showTime()",500);
 }
 //格式化时间:分秒。


function formatTime (i){ if(i < 10){ i = "0" + i; } return i; }

显示结果:

JavaScript实现倒计时代码段Item1(非常实用)_javascript技巧,第2张

2、倒计时时差

讲解gettime()等方法,及计算时间的方法,学会时间相差的天数。





 获取时间
 
  window.onload = function(){
   deadTime();
  }
  function deadTime(){
   var nowTime = new Date();
   var finalTime = new Date("2015-11-11");
   var lefttime = (finalTime.getTime() - nowTime.getTime())/(1000*24*60*60);
   var date = Math.ceil(lefttime);
   document.getElementById("time").innerHTML = date;
  }
 


 

距离双十一还有:

显示效果:

JavaScript实现倒计时代码段Item1(非常实用)_javascript技巧,第3张

3、 限时抢购

如何运用日期对象及方法,计算相差的天、时、分、秒的方法。





团购——限时抢


function FreshTime() { var endtime=new Date("2015/11/11,12:20:12");//结束时间 var nowtime = new Date();//当前时间 var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); d=parseInt(lefttime/3600/24); h=parseInt((lefttime/3600)%24); m=parseInt((lefttime/60)%60); s=parseInt(lefttime%60); document.getElementById("LeftTime").innerHTML="距离活动结束还剩" + d+"天"+h+"小时"+m+"分"+s+"秒"; if(lefttime<=0){ document.getElementById("LeftTime").innerHTML="团购已结束"; clearInterval(sh); } } FreshTime(); var sh; sh=setInterval(FreshTime,1000);

JavaScript实现倒计时代码段Item1(非常实用)_javascript技巧,第4张

欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/zaji/347747.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2018-05-31
下一篇 2018-05-31

发表评论

登录后才能评论

评论列表(0条)

保存