码迷,mamicode.com
首页 > Web开发 > 详细

网站倒计时

时间:2017-10-11 18:10:37      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:gettime   har   div   date   time()   function   提示   flow   title   


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站倒计时---求余</title>
<style>
*{
margin:0;
padding:0;
}
html{
font-family:微软雅黑;
}
#wrap{
width:100%;
height:60px;
background:#F90013;
}
#time>div{
float:left;
margin-top:12px;
}
#time{
width:128px;
height:60px;
/*background:blue;*/
margin:0 auto;
/*overflow:hidden;*/
}
#hour,#minute,#second{
width:36px;
height:36px;
background:#440106;
border-radius:5px;
line-height:36px;
color:#F90013;
text-align:center;
font-size:24px;
font-weight:bold;
}
.maohao{
width: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>

网站倒计时

标签:gettime   har   div   date   time()   function   提示   flow   title   

原文地址:http://www.cnblogs.com/mgqworks/p/7651769.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!