技术心得：实现“换一批”类的效果

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

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

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

代码：

优惠券

ul, li {

margin: 0;

padding: 0;

list-style: //代码效果参考：http://www.lyjsj.net.cn/wx/art_23518.html

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;

}

换一批

function CouponArray() {

//默认的数据

this.couponList = 【】;

// 截取后的新数据

this.couponNewList = 【】;

// 拼接字符串变量

this.couponStr = "";

// 截取第几组的开始参数

this.timeStart = 0;

// 截取//代码效果参考：http://www.lyjsj.net.cn/wz/art_23516.html

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 += "" + this.couponNewList【i】.name + ""

}

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: //代码效果参考：http://www.lyjsj.net.cn/wz/art_23514.html

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("没有更多优惠券了");

}

});

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