页面实现不定条数据倒计时

最新推荐文章于 2025-01-16 10:17:56 发布

原创最新推荐文章于 2025-01-16 10:17:56 发布 · 580 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #倒计时

JS+AJAX+CSS 专栏收录该内容

11 篇文章

订阅专栏

页面(直接是到期时间)：

#foreach($auction in $listAuctionList)
    <span class="name">剩余时间：</span><span class="orange expiryTo" date0="$!dateTool.format("yyyy-MM-dd HH:mm:ss",$!{auction.expiryTo})" id="divdown_$!{velocityCount}">$!dateTool.format("yyyy-MM-dd HH:mm:ss",$!{auction.expiryTo})</span>
#end

初始化页面：

for (var i=1;i<= $listAuctionList.size();i++) {
            var id = "divdown_"+i;
            var expireTime = $('#'+id).html();
            formatterExpireTime(id,expireTime);
        }

        function formatterExpireTime(id,expireDay)
        {
            if(expireDay==null || expireDay == "" || expireDay == undefined)
            {
                return false;
            }
            //过期时间
            var dateArray0 = expireDay.split(" ");
            //计算出 年-月-日
            var dateArray1 = dateArray0[0].split("-");
            //计算出 时:分:秒
            var dateArray2 = dateArray0[1].split(":");

            //设置过期时间
            var date0 = new Date();
            date0.setFullYear(parseInt(dateArray1[0]));
            date0.setMonth(parseInt(dateArray1[1]-1));
            date0.setDate(parseInt(dateArray1[2]));
            date0.setHours(parseInt(dateArray2[0]));
            date0.setMinutes(parseInt(dateArray2[1]));
            date0.setSeconds(parseInt(dateArray2[2]));

            //计算出当前时间
            var now = new Date();
            //计算出还有多少毫秒过期
            var leftTime = date0.getTime() - now.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);
            var html = day+"天"+(hour>9?hour:("0" + hour))+"时"+(minute>9?minute:("0"+minute))+"分"+(second>9?second:("0"+second))+"秒";
            //显示到页面
            $('#'+id).html(html);
        }

倒计时实现：

//倒计时
        function showCountDown() {
            $('.expiryTo').each(function(index,element){
                var id =  $(this).attr("id");
                var expireDay = $(this).attr("date0");
                formatterExpireTime(id,expireDay);
            });
        }

window.setInterval(function(){showCountDown();}, 1000);

效果：