根据服务器时间,计算出时间轴的倒计时。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="showTime(10)">10点</button>
<button onclick="showTime(11)">11点</button>
<button onclick="showTime(12)">12点</button>
<button onclick="showTime(13)">13点</button>
<button onclick="showTime(14)">14点</button>
<button onclick="showTime(15)">15点</button>
<button onclick="showTime(16)">16点</button>
<button onclick="showTime(17)">17点</button>
<button onclick="showTime(18)">18点</button>
<button onclick="showTime(19)">19点</button>
<button onclick="showTime(20)">20点</button>
<button onclick="showTime(21)">21点</button>
<button onclick="showTime(22)">22点</button>
<button onclick="showTime(23)">23点</button>
<button onclick="showTime(24)">24点</button>
<div id="cTime"></div>
<script type="text/javascript">
var serverTime=1550029245434;
var count=setInterval(function(){
serverTime+=1000
},1000)
// 时间戳转时间格式
function transDate(value){
var date=new Date(value);
var y=date.getFullYear();
var m=date.getMonth()+1;
m=m<10?('0'+m):m;
var d=date.getDate();
d=d<10?('0'+d):d;
var h=date.getHours();
h=h<10?('0'+h):h;
var minutes=date.getMinutes();
minutes=minutes<10?('0'+minutes):minutes;
var seconds=date.getSeconds();
seconds=seconds<10?('0'+seconds):seconds;
return y+'/'+m+'/'+'/'+d;
}
transDate(1550029245434);
// 时间格式转时间戳
function transNum(ymd,hour){
return (new Date(ymd+' '+hour+':00:00')).getTime();
}
var nowSet;
function showTime(hour){
var ymd=transDate(1550029245434);
var nowTime=transNum(ymd,hour);
clearInterval(nowSet);
document.getElementById('cTime').innerHTML='距离活动结束还有:'+countTime(serverTime,nowTime);
nowSet=setInterval(function(){
document.getElementById('cTime').innerHTML='距离活动结束还有:'+countTime(serverTime,nowTime);
},1000)
}
function countTime(start,end){
var timeDiff=(end-start)/1000;
if(timeDiff>0){
var hour=Math.floor(timeDiff/3600);
hour=hour<10?'0'+hour:hour;
timeDiff=timeDiff%3600;
var minute=Math.floor(timeDiff/60);
minute=minute<10?'0'+minute:minute;
timeDiff=timeDiff%60;
var second=Math.floor(timeDiff);
second=second<10?'0'+second:second;
return hour+":"+minute+":"+second;
}else{
clearInterval(nowSet);
return '活动已结束'
}
}
</script>
</body>
</html>