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了,加油!