Hello, everyone!我将这个博客作为自己的前端技术笔记,以后要将在这里分享自己的学习心得、转载好的文章今天开始第一篇笔记,哈哈!
js实现时间倒计时显示。今天学习到了两种方法倒计时:1、从客户端获取时间倒计时;2、从服务器端获取时间倒计时。
这是一个很小的js的demo,从客户端获取时间思路简单、明了,但是弊端在于,它获取的是用户系统的时间,如果用户系统时间不对,倒计时也就千差万别了,所以我觉得不完美,代码如下:
距离春节还有<span id="span" style="font-size:30px;"></span> <script> var oSpan = document.getElementById('span'); function myTime(){ var Time1 = new Date(); //当前时间 var Time2 = new Date(2016,1,7,24,0,0); //倒计时时间 var t = Math.floor((Time2 - Time1)/1000); // 天:Math.floor(t/86400) // 时:Math.floor(t%86400/3600) // 分:Math.floor(t%86400%3600/60) // 秒:t%60 var str = Math.floor(t/86400)+'天'+toTwo(Math.floor(t%86400/3600))+'时'+toTwo(Math.floor(t%86400%3600/60))+'分'+toTwo(t%60)+'秒'; oSpan.innerHTML = str; } myTime(); function toTwo(n){ //判断当'时分秒'为个位数时,需要前面加0,如01 return n<10?'0'+n:''+n; } setInterval(function(){ myTime(); },1000); </script> --> <!-- <script type="text/javascript"> var xhr = new XMLHttpRequest(); if( !xhr ){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open("HEAD",location.href,true); xhr.onreadystatechange=function(){ if( xhr.readyState == 4 && xhr.status == 200 ){ alert(xhr.getResponseHeader("Date")); } } xhr.send(null); var Time1 = new Date(); alert(Time1); </script>后面我又找了获取服务器端时间的方法,这样的话,只要服务器端时间正确,客户端的系统时间不会影响倒计时,但因为要获取服务器时间,所以页面要放到服务器上才能验证哦~代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>服务器倒计时</title> <script type="text/javascript"> get=function (id){return document.getElementById(id)} if(document.all){ window.XMLHttpRequest=function(){ var get=['Microsoft.XMLHTTP','Msxml2.XMLHTTP']; for(var i=0;i<get.length;i++){try{return new ActiveXObject(get[i])}catch(e){}}; }; } webDate=function(fn){ var Htime=new XMLHttpRequest(); Htime.onreadystatechange=function(){Htime.readyState==4&&(fn(new Date(Htime.getResponseHeader('Date'))))}; Htime.open('HEAD', '/?_='+(-new Date)); Htime.send(null); } window.time=new Date(); targetTime=new Date(); time2String=function (t){ with(t)return [getFullYear(),'年' ,('0'+(getMonth()+1)).slice(-2),'月' ,('0'+getDate()).slice(-2),'日 ' ,('0'+getHours()).slice(-2),': ' ,('0'+getMinutes()).slice(-2),': ' ,('0'+getSeconds()).slice(-2)].join('') } int2time=function (m){ m-=(D=parseInt(m/86400000))*86400000; m-=(H=parseInt(m/3600000))*3600000; S=parseInt((m-=(M=parseInt(m/60000))*60000)/1000); return D+'天'+H+'小时'+M+'分'+S+'秒' } setInterval(function (){ webDate(function (webTime){ get('web').innerHTML=time2String(time=webTime); }) get('locale').innerHTML=time2String(new Date); get('time').innerHTML=int2time(targetTime-time); if ((targetTime-time)<0) { get('time').innerHTML = 'Game Over'; } },1000) </script> </head> <body> 设定时间:2016年1月31日0时0分0秒<br> 服务器时间:<span id='web'>loading...</span><br> 本地时间:<span id="locale">loading...</span><br> 倒计时时间:<span id="time">loading...</span> <script type="text/javascript" charset="utf-8"> targetTime=new Date(2016,1,31,00,00,00); </script> </body> </html>哈哈, 技术博客分享,我已经成功的从0到1了,加油!