JS倒计时，距离某一日期还有多少时间
1个回答
展开全部
正好先前撸过一个，分享出来：
<!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:0; list-style:none outside none; margin-top:8px;}
.wrap-date li {width:80px; display:inline-block; *display:inline; *zoom:1; text-align:center; font-size:24px; 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;}
</style>
<script type="text/javascript">
var targetDate = '2017-12-30 '; // 目标日期（活动截止时间）
// 创建倒计时定时器
var timer = window.setInterval(function(){
RefreshTime(targetDate);
},1000);
function RefreshTime(targetDate){
// 获取本地当前时间，截止时间 - 当前时间 = 倒计时时间
var Today = new Date();
var endDate = new Date(targetDate);
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>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
