<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站倒计时---求余</title>
<style>
*{
margin:0;
padding:0;
}
html{
font-family:微软雅黑;
}
#wrap{
100%;
height:60px;
background:#F90013;
}
#time>div{
float:left;
margin-top:12px;
}
#time{
128px;
height:60px;
/*background:blue;*/
margin:0 auto;
/*overflow:hidden;*/
}
#hour,#minute,#second{
36px;
height:36px;
background:#440106;
border-radius:5px;
line-height:36px;
color:#F90013;
text-align:center;
font-size:24px;
font-weight:bold;
}
.maohao{
10px;
height:36px;
line-height:36px;
font-size:20px;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<div id="wrap">
<div id="time">
<div id="hour">00</div><div class="maohao">:</div>
<div id="minute">00</div><div class="maohao">:</div>
<div id="second">00</div>
</div>
</div>
</body>
<script>
/*
倒计时：从当前此刻到指定的活动开始时间
*/
// 此刻时间
var now = new Date();
// 定义活动开始的时间
var startTime = new Date(now.getTime() + 1000*60*60*3); // 此刻开始的3小时
console.log(startTime);
// 获取元素
var hour = document.getElementById('hour');
var minute = document.getElementById('minute');
var second = document.getElementById('second');
// 定义设置倒计时时间的函数
function setTime(){
// 当前时间
var now = new Date();
// 两个时间对象之间的差值
var timeCha = startTime.getTime() - now.getTime();
// 判断时间的差值
if(timeCha<=0){
// 设置时间已经为0
hour.innerHTML = '00';
minute.innerHTML = '00';
second.innerHTML = '00';
// 弹出提示
alert('活动已开始，快来抢购吧');
// 终止程序进行
return;
}
// 小时 差值
var timeHour = Math.floor(timeCha/1000/60/60);
// 赋值小时
hour.innerHTML = zeroFill(timeHour);
// 分钟 === 所有的时间 相当于多少个分钟 72.5分钟%60 == 1小时 12.5分钟
var timeMinute = Math.floor(timeCha/1000/60%60);
// 赋值分钟
minute.innerHTML = zeroFill(timeMinute);
// 秒 === 所有的时间相当于多少秒 120002 % 60 == 200分钟 2s
var timeSecond = Math.floor(timeCha/1000%60);
// 赋值秒
second.innerHTML = zeroFill(timeSecond);
}
// 页面进入时调用函数
setTime();
// 时间差值
var timeCha = startTime.getTime() - now.getTime();
// console.log(timeCha);
// 如果活动还未开始启动定时器
if(timeCha>0){
// 定时器
setInterval(function(){
// 调用函数
setTime()
},1000);
}
/**
* 定义补充前导0的函数 zeroFill()
*/
function zeroFill(num){
if(num<10){
num = '0'+num;
}
// 返回
return num;
}
</script>
</html>