倒计时(原生写法)

来源：互联网发布：sqlserver存储过程用法编辑：程序博客网时间：2024/05/29 03:19

<!DOCTYPE html>

<head>

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>

<span>距离您中奖还有</span>

</div>

// 注：这里用到的当前时间为本机电脑时间，如果是项目需要，请获取服务器当前时间来做计算部分

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>

0 0