js——倒计时实现
效果：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>倒计时</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
*{
margin:0;
padding:0;
}
p{
margin:50px;
}
i{
font-style:normal;
}
.countTime{
color:red;
}
</style>
</head>
<body>
<div>
<p>开始时间：<span id="start_time"></span> - 结束时间：<span id="end_time"></span></p>
<p class="countDown"></p>
</div>
<script type="text/javascript">
$(document).ready(function() {
window.start_time = '2019-09-29 12:00';
window.end_time = '2019-10-07 12:00';
$('#start_time').text(window.start_time);
$('#end_time').text(window.end_time);
setInterval(function() {
countDown();
var t = countDown().title;
$('.countDown').empty();
$('.countDown').append(t);
}, 1000);
})
function countDown() {
var end = window.end_time,
start = window.start_time,
string = '',
title = '',
now = 0,
rightTime = 0;
end = new Date(end.replace(/-/g, "/")).getTime(); // 兼容IOS苹果手机
start = new Date(start.replace(/-/g, "/")).getTime();
now = new Date().getTime();
if (now >= start) { // 已开始
rightTime = end - now;
title = '<span>距结束：</span>';
} else { // 未开始
title = '<p>未开始</p>';
}
if (rightTime > 0) {
if (now >= start) {
var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
var mm = Math.floor((rightTime / 1000 / 60) % 60);
var ss = Math.floor((rightTime / 1000) % 60);
if (dd < 10) {
dd = '0' + dd;
}
if (hh < 10) {
hh = '0' + hh;
}
if (mm < 10) {
mm = '0' + mm;
}
if (ss < 10) {
ss = '0' + ss;
}
string = "<i><span class='countTime'>" + dd +
"</span>天<span class='countTime'>" + hh +
"</span>时<span class='countTime'>" + mm +
"</span>分<span class='countTime'>" + ss +
"</span>秒</i>";
title = title + string;
}
} else {
title = '<p>已结束</p>';
}
return {
"title": title
}
}
</script>
</body>
</html>
