列表項(xiàng)倒計(jì)時(shí)

//html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表項(xiàng)倒計(jì)時(shí)</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">已結(jié)束</span>
                    {{ } else { }}
                    <span class="state underway">進(jìn)行中</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;
        }
    },
    // 格式化時(shí)間
    formatSurplusTime: function (timeStamp) {
        var sec = Math.floor(timeStamp/1000);
        if (sec >= 0) {
            return '剩余' + Math.floor(sec/86400) + '天' + ' ' + Math.floor(sec%86400/3600) + '時(shí): ' + Math.floor(sec%86400%3600/60) + '分: ' + sec%60 + '秒';
        } else {
            return '剩余0天 0時(shí): 0分: 0秒';
        }
    },
    // 檢驗(yàn)倒計(jì)時(shí)是否全部結(jié)束
    checkTimeStamp: function (timeStamp) {
        return timeStamp <= 1000;
    },
    // 倒計(jì)時(shí)
    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();

最后編輯于：2018.03.01 18:12:57

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市枫慷，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌腐晾，老刑警劉巖，帶你破解...
沈念sama閱讀 217,185評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件谈火，死亡現(xiàn)場離奇詭異秒咨，居然都是意外死亡稚瘾，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,652評論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門周霉，熙熙樓的掌柜王于貴愁眉苦臉地迎上來掂器，“玉大人，你說我怎么就攤上這事俱箱」停” “怎么了？”我有些...
開封第一講書人閱讀 163,524評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵狞谱，是天一觀的道長乃摹。經(jīng)常有香客問我，道長跟衅，這世上最難降的妖魔是什么孵睬？我笑而不...
開封第一講書人閱讀 58,339評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮伶跷，結(jié)果婚禮上掰读，老公的妹妹穿的比我還像新娘。我一直安慰自己叭莫，他們只是感情好磷支，可當(dāng)我...
茶點(diǎn)故事閱讀 67,387評論 6贊 391
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著食寡，像睡著了一般雾狈。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上抵皱，一...
開封第一講書人閱讀 51,287評論 1贊 301
城市分裂傳說
那天善榛，我揣著相機(jī)與錄音辩蛋，去河邊找鬼。笑死移盆，一個(gè)胖子當(dāng)著我的面吹牛悼院，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播咒循，決...
沈念sama閱讀 40,130評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼据途，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了叙甸？” 一聲冷哼從身側(cè)響起颖医，我...
開封第一講書人閱讀 38,985評論 0贊 275
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎裆蒸，沒想到半個(gè)月后熔萧，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,420評論 1贊 313
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡僚祷，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,617評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年佛致，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片辙谜。...
茶點(diǎn)故事閱讀 39,779評論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡俺榆，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出装哆，到底是詐尸還是另有隱情肋演，我是刑警寧澤，帶...
沈念sama閱讀 35,477評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布烂琴，位于F島的核電站，受9級特大地震影響蜕乡，放射性物質(zhì)發(fā)生泄漏奸绷。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,088評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一层玲、第九天我趴在偏房一處隱蔽的房頂上張望号醉。院中可真熱鬧，春花似錦辛块、人聲如沸畔派。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,716評論 0贊 22
一樁弒父案润绵，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽线椰。三九已至，卻和暖如春尘盼，著一層夾襖步出監(jiān)牢的瞬間憨愉，已是汗流浹背烦绳。一陣腳步聲響...
開封第一講書人閱讀 32,857評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留配紫，地道東北人径密。一個(gè)月前我還...
沈念sama閱讀 47,876評論 2贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像躺孝，于是被迫代替她去往敵國和親享扔。傳聞我的和親對象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,700評論 2贊 354

列表項(xiàng)倒計(jì)時(shí)

推薦閱讀更多精彩內(nèi)容