JS倒计时
2016-12-28 22:26
155 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>倒计时效果</title>
<style type="text/css">
.wrap {width:400px; margin:50px auto; color:#333; font-family:'\5FAE\8F6F\96C5\9ED1';}
.wrap-date {font-size:24px; list-style:none outside none; margin-top:8px;}
.wrap-date li {width:80px; display:inline-block; *display:inline; *zoom:1; text-align:center; background:hotPink; padding:1px 0 5px; margin-right:3px;}
.date {font-family:Tahoma; font-size:50px; color:#fff;}
#endTips {color:#999; background:#e9e9e9; line-height:2.4em; text-align:center; margin-top:15px;}
.author {color:#090; font-size:12px; margin-top:50px; line-height:1.8; text-align:right;}
</style>
<script type="text/javascript">
// 创建定时器
var timer = window.setInterval(function(){
RefreshTime(2018,12,23); // 活动截止时间
},1000);
function RefreshTime(year,month,day){
// 获取本地当前时间，截止时间 - 当前时间 = 倒计时时间
var Today = new Date();
var endDate = new Date(year, month-1, day);
var leftTime = endDate.getTime() - Today.getTime();
var leftSecond = parseInt(leftTime / 1000);
var Day = Math.floor(leftSecond / (60*60*24));
var Hour = Math.floor((leftSecond - Day*24*60*60) / 3600);
var Minute=Math.floor((leftSecond - Day*24*60*60 - Hour*3600) / 60);
var Second=Math.floor(leftSecond - Day*24*60*60 - Hour*3600 - Minute*60);
if(Day < "0"){
clearInterval(timer); // 清除定时器
document.getElementById("endTips").innerHTML = "活动已结束";
document.getElementById("wrapDate").style.display = "none";
return;
}
// 写入容器
document.getElementById("timeDay").innerHTML = Day;
document.getElementById("timeHour").innerHTML = Hour;
document.getElementById("timeMin").innerHTML = Minute;
document.getElementById("timeSec").innerHTML = Second;
}
</script>
</head>
<body>
<div class="wrap">
距活动结束仅剩：
<ul class="wrap-date" id="wrapDate">
<li><span id="timeDay" class="date">0</span><br />天</li><!--
--><li><span id="timeHour" class="date">0</span><br />时</li><!--
--><li><span id="timeMin" class="date">0</span><br />分</li><!--
--><li><span id="timeSec" class="date">0</span><br />秒</li>
</ul>
<div id="endTips"></div>
<p class="author">—— Wing Meng 2016.12.03</p>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 