<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style type="text/css">
html,body,div,span{
font-size: 16px;
font-family: "微软雅黑";
}
#div1{
width: 600px;
height: 50px;
line-height: 50px;
text-align: center;
margin:50px auto;
background: -moz-linear-gradient(left, red, #f96, yellow, green, #ace);
background: -webkit-linear-gradient(left,red,#f96,yellow,green,#ace);
background: -o-linear-gradient(left, red, #f96, yellow, green, #ace);
}
#date1,#hour1,#minute1,#second1{
color: red;
font-weight: bold;
}
#date2,#hour2,#minute2,#second2{
color:#c49d62;
font-weight: bold;
}
</style>
</head>
<body>
<div id="div1">
<span>距离您中奖还有</span>
<span id="date1"></span><span id="date2"></span><span>天</span>
<span id="hour1"></span><span id="hour2"></span><span>时</span>
<span id="minute1"></span><span id="minute2"></span><span>分</span>
<span id="second1"></span><span id="second2"></span><span>秒</span>
</div>
<script type="text/javascript">
// 注:这里用到的当前时间为本机电脑时间,如果是项目需要,请获取服务器当前时间来做计算部分
function addZero(num){
//此方法为处理一位数字的时候添零补齐两位
return num<10?"0"+num:num;
}
function remind(){
var str="2015-7-26 13:53:00";
str=str.replace(/[-]/g,"/");
var oDate1=document.getElementById('date1');
var oDate2=document.getElementById('date2');
var oHour1=document.getElementById('hour1');
var oHour2=document.getElementById('hour2');
var oMinute1=document.getElementById('minute1');
var oMinute2=document.getElementById('minute2');
var oSecond1=document.getElementById('second1');
var oSecond2=document.getElementById('second2');
//注:以上为获取元素,以下为计算时间
var spanTimeNow =new Date().getTime();//当前时间距离1970年1月1日午夜之间的毫秒数
var spanTimeTarget= Date.parse(str);//目标时间距离1970年1月1日午夜之间的毫秒数
var spanTime=spanTimeTarget-spanTimeNow;
var date=addZero(Math.floor(spanTime/(1000*60*60*24)));
var hour=addZero(Math.floor(spanTime/(1000*60*60)-date*24));
var minute=addZero(Math.floor(spanTime/(1000*60)-date*24*60-hour*60));
var second=addZero(Math.floor(spanTime/1000-date*24*60*60-hour*60*60-minute*60));
//注:将获得的时间添加到指定位置
oDate1.innerHTML=date.toString().substr(0,1);
oDate2.innerHTML=date.toString().substr(1,1);
oHour1.innerHTML=hour.toString().substr(0,1);
oHour2.innerHTML=hour.toString().substr(1,1);
oMinute1.innerHTML=minute.toString().substr(0,1);
oMinute2.innerHTML=minute.toString().substr(1,1);
oSecond1.innerHTML=second.toString().substr(0,1);
oSecond2.innerHTML=second.toString().substr(1,1);
}
// window.setInterval(function(){
// remind();
// },6000)
window.setInterval(remind,1000);//只有在remind里面没有参数
</script>
</body>
</html>