欢迎您, 来到 宁时修博客.^_^

js流加载实现团购类网站抢购批量倒计时

2018/10/11 宁时修 php,javascript,thinkPHP 5.0 636
团购批量倒计时

电商网站中大多数都有团购,抢购吧。在抢购的热卖商品中我们经常会看到抢购品上面有个到计时间,用户就能够很准确清晰看到该活动还剩余多久。今天正好我负责的项目也有这样的应用场景,不过有些差别。我这个是批量到计时不是单个的。很多电商平台大多数都是单个的。今天案例恰恰相反,有多个倒计时同时跑。而且还要配合js的流加载来一起实现。那么直接来看一张效果图吧

1.png

效果就是这样。

下面附上实战代码

技术用到了 layui.js + javascript + tp5

html端

<div id="cp-box"></div>

js端 流加载

需要引入layui.js

<script type="text/javascript" src="/layui/layui.js"></script>
<script>
    layui.use(['flow'], function(){
        var flow = layui.flow;
        flow.load({
            elem: '#cp-box'
            ,isAuto: true
            ,isLazyimg: false
            ,end : ' '
            ,mb:50
            ,done: function(page, next){
                $.ajax({
                    url: "/getData.html",
                    data: {'page' : page},
                    method: "POST",
                    async: true,
                    dataType: "json",
                    success: function (res) {
                        var _data = eval("(" + res + ")");
                        // 组合字符串
                        var html = "";
                        layui.each(_data.data, function (k, v) {
                            html += '<div class="tglb">';
                            html += '<div class="tglb_left">';
                            html += '<img src="'+ v.original_img+'" class="img-responsive" />';
                            html += '</div>';
                            html += '<div class="tglb_right">';
                            html += '<div class="tglb_right1">';
                            html += '<p class="tglb_p1">'+ v.goods_name +'</p>';
                            html += '<p class="tglb_p2">倒计时:' + '<span class="timespan' + k + '">' + '</span></p>';
                            html += "<script>showDate('"+v.date+"','.timespan"+k+"')<\/script>";
                            html += '</div>';
                            html += '<div class="tglb_right2">';
                            html += '<div class="tglb_div1">';
                            html += '<p class="tglb_p3">'+ v.by_num +'人已参与</p>';
                            html += '<p class="tglb_p4">¥'+ v.price +' <span>¥'+ v.goods_price +'</span></p>';
                            html += '</div>';
                            html += '<div class="tglb_div2"><span>立即抢购</span></div>';
                            html += '</div>';
                            html += '</div>';
                            html += '<div class="clear"></div></div>';
                        });
                        next(html, page < _data.pages);
                    }
                });
            }
        });
    });
</script>

js定时器值计算

<script>
    function showDate(date,controler){
        var starttime = new Date(date);
        setInterval(function () {
            var nowtime = new Date();
            var time = starttime - nowtime;
            var day = parseInt(time / 1000 / 60 / 60 / 24);
            var hour = parseInt(time / 1000 / 60 / 60 % 24);
            var minute = parseInt(time / 1000 / 60 % 60);
            var seconds = parseInt(time / 1000 % 60);
            $(controler).html("<samp>"+ day +"</samp>" + " 天" +  "<samp>" + hour +"</samp>" + " 时" + "<samp>" + minute +"</samp>" + " 分" + "<samp>" + seconds +"</samp>" + " 秒");
        }, 1000);
    }
</script>

服务端数据返回

     /**
     * 获取团购记录
     */
    public function getData()
    {
        try{
            $status = $this->request->param('status');
            $page = $this->request->param('page',1);
            $info = [];
            if ($result['data']) {
                foreach($result['data'] as $k => $v) {
                    $info[$k]['goods_id'] = $v['goods_id'];//商品id
                    $info[$k]['id'] = $v['id'];//团购id
                    $info[$k]['title'] = $v['title'];//活动名称
                    $info[$k]['goods_name'] = $v['goods_name'];//商品名称
                    $info[$k]['by_num'] = $v['order_num'];参与人数
                    $info[$k]['goods_price'] = $v['goods_price'];//商品原价
                    $info[$k]['price'] = $v['price'];//团购价
                    $info[$k]['original_img'] = $v['original_img'];//商品图片
                    $info[$k]['start_time'] = $v['start_time'];//开始时间
                    $info[$k]['end_time'] = $v['end_time'];//结束时间
                    $info[$k]['date'] = date('Y/m/d H:i:s',$v['end_time']);//结束时间
                }
            }
            $result['data'] = $info;
            return json($result);
        } catch (\Exception $e) {
            return Response::create(json_encode(['status' => 0, 'msg' => $e->getMessage(),'data' => [], 'pages' => 0]), 'json');
        }
    }
点赞
说说你的看法

所有评论: (0)

# 加入组织

1、用手机QQ扫左侧二维码

2、搜Q群:1058582137

3、点击 宁时修博客交流群