实现 “换一批” 类的效果

需求：点击换一批，显示下一页的优惠券。

 

功能：动态配置几个元素为一组。

 

原理：点击换一批的时候，记录点击的次数和需要截取的每组数据基数。然后添加到页面中。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优惠券</title>
    <style>
        ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
            overflow: hidden;
        }

        .list {
            width: 100px;
            height: 40px;
            float: left;
            background: darkorange;
            margin-right: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }

        div {
            width: 100%;
            text-align: right;
            cursor: pointer;
        }
    </style>
</head>
<body>
<ul id="coupon_item">

</ul>
<div id="exchange">换一批</div>
<script>
    function CouponArray() {
        //默认的数据
        this.couponList = [];
        // 截取后的新数据
        this.couponNewList = [];
        // 拼接字符串变量
        this.couponStr = "";
        // 截取第几组的开始参数
        this.timeStart = 0;
        // 截取第几组的结束参数
        this.timeEnd = 1;
        //默认为0组
        this.group = 0;
        //默认5个为一组,可以根据需求修改。
        this.num = 5;
        //点击的次数
        this.clickNum = 0;
        // 计算数据的长度，共分为几组，如果不能整除则加1
        this.listLen = listLen;
        //计算将点击次数和开始截取的参数清空
        this.clear = clear;
        //动态添加数据结构
        this.render = render;
        //每点击一次，记录次数
        this.autoIncre = autoIncre;
    }
    function listLen() {
        var len = this.couponList.length;
        this.group = len / this.num;
        if (len % this.num != 0) {
            this.group = parseInt(this.group) + 1;
        }
    }
    function autoIncre() {
        this.clickNum++;
        this.timeStart++;
        this.timeEnd++;
    }
    function clear() {
        //如果点击此时大于当前数据的组数，则重新开始计数。
        if (this.clickNum > this.group - 1) {
            this.timeStart = 0;
            this.timeEnd = 1;
            this.clickNum = 0;
        }
    }

    function render() {
        this.couponStr = "";
        //截取当前每组的数据
        this.couponNewList = this.couponList.slice(this.num * this.timeStart, this.num * this.timeEnd);
        for (var i = 0; i < this.couponNewList.length; i++) {
            this.couponStr += "<li class='list'>" + this.couponNewList[i].name + "</li>"
        }
        return this.couponStr;
    }
    const coupon_item = document.getElementById("coupon_item");
    const exchange = document.getElementById("exchange");
    const p = new CouponArray();
    p.couponList = [{name: "优惠券1"}, {name: "优惠券2"}, {name: "优惠券3"}, {name: "优惠券4"}, {name: "优惠券5"}, {name: "优惠券6"}, {name: "优惠券7"}, {name: "优惠券8"}, {name: "优惠券9"}];
    let str = p.render();
    coupon_item.innerHTML = str;
    exchange.addEventListener("click", function () {
        if(p.couponList.length>4&&p.couponList.length>p.num){
            //点击的时候获取分为几组
            p.listLen();
            //每点击一次记录点击次数
            p.autoIncre();
            p.clear();
            str = p.render();
            coupon_item.innerHTML = str;
        }else{
            alert("没有更多优惠券了");
        }
    });
</script>
</body>
</html>

最后：这个需求是做项目的时候顺便就写下的，如果有更方便的方式，可以留言交流。

 

posted @ 2017-11-16 17:52  X·Man  阅读(1727)  评论(0)    收藏  举报