倒计时
倒计时JS部分
********************************************************************************
2019/12/27更新
// 计时器代码整理
//思路:计算当前最新时间和目标时间的时间差 计算当前时间差中包含的时分秒
var timebox = document.getElementById('time');
var targetTime = new Date("2019/12/28 15:54:00");
function addZero(num){
return num<10?0+'num':num
}
function count(){
var difTime=targetTime-new Data()
if(difTime<=0){
clearInterval(a);
return
}
var hours = Math.floor(diffTime/(1000*60*60));
var minutes = Math.floor((diffTime-hours*1000*60*60)/(1000*60));
var seconds = Math.floor((diffTime-hours*1000*60*60-minutes*1000*60)/1000);
timebox.innerHTML = addZero(hours)+":" + addZero(minutes) + ":"+ addZero(seconds);
}
count();
var a = setInterval(count,1000);
*******************************************************************************
<script type="text/javascript">
//getTime 获取距离1970年1月1日午夜00:00:00之间的毫秒差
var oDiv=document.getElementById("div1");
var str=getSpanTime();
oDiv.innerHTML="秒杀倒计时"+str;
//定时器 每秒钟自动执行包含的函数
var timer=window.setInterval(function(){
var str=getSpanTime();
oDiv.innerHTML="秒杀倒计时"+str;
},1000);
function getSpanTime(){
// 把本机时间变成标准时间格式的形式
var tarTime=new Date("2016/06/28 00:00:00");
//获取时间,一般不能用本机时间来作为秒杀啊等重大活动的时间 本例子只是用来编写倒计时的过程
var nowTime=new Date();
//获取目标时间距离1970年的时间差
var tarSpan=tarTime.getTime();
//获取当前时间距离1970年的时间差
var nowSpan=nowTime.getTime();
//目标时间与当前时间差
var diffTime=tarSpan-nowSpan;
//获取小时数
var hour=Math.floor(diffTime/(1000*60*60));
var hourMs=hour*60*60*1000;
var spanMs=diffTime-hourMs;
//获取分钟数
var minute=Math.floor(spanMs/(1000*60));
var minuteMs=minute*60*1000;
var spanMs1=spanMs-minuteMs;
//获取秒数
var second=Math.floor(spanMs1/1000);
return zero(hour)+":"+zero(minute)+":"+zero(second);
}
//小于10的数补零
function zero(value){
return value<10? "0"+value:value;
}
</script>
倒计时CSS部分
body,div{
margin: 0px;
padding: 0px;
}
#div1{
width: 800px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 10px auto;
border: 1px solid coral;
background: -webkit-linear-gradient(top left,#2eafbb,greenyellow,sandybrown);
font-size:20px;
font-family: "微软雅黑";
}
</style>