//html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表项倒计时</title>
</head>
<body>
<ul class="list"></ul>
<script type="text/x-dot-template" id="activeList">
{{ for (var i = 0; i < it.info.length; i++) { }}
<li class="item">
<p class="title">{{=it.info[i].actTitle ? it.info[i].actTitle : ''}}</p>
<div class="info clearfix">
{{ if (it.currentTime < it.info[i].startTime) { }}
<span class="state not_start">未开始</span>
<span class="time">{{=obj.formatStartTime(it.info[i].startTime)}}开始</span>
{{ } else if (it.currentTime > it.info[i].endTime) { }}
<span class="state over">已结束</span>
{{ } else { }}
<span class="state underway">进行中</span>
<span class="time count-down" data-currenttime="{{=it.currentTime}}" data-endtime="{{=it.info[i].endTime}}">{{=obj.formatSurplusTime(it.info[i].endTime-it.currentTime)}}</span>
{{ } }}
</div>
</li>
{{ } }}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="doT.js"></script>
</body>
</html>
//js
var obj = {
page: 1,
isScroll: false,
isIOS: (/iphone|ipad|ipod|itouch/gi).test(navigator.userAgent),
timer: null,
timeArr: [],
base: 0,
timeStamp: 0,
// 初始化
init: function () {
obj.list();
window.onmousewheel = document.onmousewheel = obj.scrollLoad;
},
// 列表
list: function () {
var res = {
currentTime: 1519874437647,
result: 0,
isEnd: 1,
info: [
{
actTitle:"新建活动1",
appUrl:"http://upcdn.mpres.51vv.com/image/bc06a7a3cfd40163f8f396c0fec5f294.png",
endTime:1519874445000,
pcUrl:"http://upcdn.mpres.51vv.com/image/bc06a7a3cfd40163f8f396c0fec5f294.png",
startTime:1517500800000
},
{
actTitle:"新建活动2",
appUrl:"http://upcdn.mpres.51vv.com/image/bc06a7a3cfd40163f8f396c0fec5f294.png",
endTime:1519874449000,
pcUrl:"http://upcdn.mpres.51vv.com/image/bc06a7a3cfd40163f8f396c0fec5f294.png",
startTime:1519747260000
},
{
actTitle:"新建活动3",
appUrl:"http://upcdn.mpres.51vv.com/image/bc06a7a3cfd40163f8f396c0fec5f294.png",
endTime:1519747200000,
pcUrl:"http://upcdn.mpres.51vv.com/image/bc06a7a3cfd40163f8f396c0fec5f294.png",
startTime:1517414400000
},
{
actTitle:"新建活动4",
appUrl:"http://upcdn.mpres.51vv.com/image/bc06a7a3cfd40163f8f396c0fec5f294.png",
endTime:1519874448000,
pcUrl:"http://upcdn.mpres.51vv.com/image/bc06a7a3cfd40163f8f396c0fec5f294.png",
startTime:1517414400000
}
]
};
if (res.result != 0) return;
if (res.info && res.info.length > 0) {
obj.isScroll = true;
var item = $('#activeList').html();
obj.page == 1 ? $('.list').html(doT.template(item)(res)) : $('.list').append(doT.template(item)(res));
for (var i = 0; i < res.info.length; i++) {
if (res.info[i].startTime < res.currentTime && res.currentTime < res.info[i].endTime) {
obj.timeArr.push(res.info[i].endTime - res.currentTime);
}
}
obj.countDown();
return;
}
},
// 格式化时间
formatSurplusTime: function (timeStamp) {
var sec = Math.floor(timeStamp/1000);
if (sec >= 0) {
return '剩余' + Math.floor(sec/86400) + '天' + ' ' + Math.floor(sec%86400/3600) + '时: ' + Math.floor(sec%86400%3600/60) + '分: ' + sec%60 + '秒';
} else {
return '剩余0天 0时: 0分: 0秒';
}
},
// 检验倒计时是否全部结束
checkTimeStamp: function (timeStamp) {
return timeStamp <= 1000;
},
// 倒计时
countDown: function () {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// console.log(obj.timeArr);
if (obj.timeArr.every(obj.checkTimeStamp)) {
clearInterval(obj.timer);
} else {
for (var i = 0; i < obj.timeArr.length; i++) {
obj.timeArr[i] = obj.timeArr[i] - 1000;
$('.count-down').eq(i).html(obj.formatSurplusTime(obj.timeArr[i]));
}
}
// console.log(obj.timeArr);
},1*1000);
}
};
obj.init();
网友评论