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

简介: 技术心得:实现“换一批”类的效果

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


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


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


代码:


优惠券


ul, li {


margin: 0;


padding: 0;


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

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;


}


换一批


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

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


}


});


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

相关文章
|
7月前
|
存储 分布式计算 安全
我的C++奇迹之旅:值和引用的本质效率与性能比较2
我的C++奇迹之旅:值和引用的本质效率与性能比较
|
7月前
|
编译器 C++
我的C++奇迹之旅:值和引用的本质效率与性能比较1
我的C++奇迹之旅:值和引用的本质效率与性能比较
|
计算机视觉
队列的概念及结构(内有成型代码可供CV工程师参考)
队列的概念及结构(内有成型代码可供CV工程师参考)
77 0
|
JSON 前端开发 安全
【超干货】又一批热乎的测试面试题
【超干货】又一批热乎的测试面试题
|
Java Apache
集合的特别要注意地方哈
《系统设计》系列
79 0
|
存储 编译器 C语言
类的初始认识(跑路人笔记)<一>(2)
类的初始认识(跑路人笔记)<一>
类的初始认识(跑路人笔记)<一>(2)
|
编译器 C语言 C++
类的初始认识(跑路人笔记)<一>(1)
类的初始认识(跑路人笔记)<一>
类的初始认识(跑路人笔记)<一>(1)
|
XML 安全 Java
超车时刻:Java反射源码解析
超车时刻:Java反射源码解析
165 0
超车时刻:Java反射源码解析
|
移动开发
文科生成为技术经理,一共分几步(1)?
文科生成为技术经理,一共分几步(1)?
178 0
文科生成为技术经理,一共分几步(1)?
|
机器学习/深度学习 缓存 Kubernetes
文科生成为技术经理,一共分几步(2)?
文科生成为技术经理,一共分几步(2)?
180 0
文科生成为技术经理,一共分几步(2)?