原生js点击按钮加载更多数据

Posted 2021-02-05 lyw5

css部分

*{
margin: 0;
padding: 0;
}
li{
list-style: none;
width:48%;
height:100px;
text-align: center;
line-height: 100px;
background: gainsboro;
margin:1.3% 1% 0 1%;
float:left;
}

html部分

<ul id = "ul"></ul>

<div>
<button id = "btn" style = "width:93%;height: 50px;background: pink;margin-left:3.5%;margin-top:30px;">点击加载更多</button>
</div>

 

js部分

var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27];// 数据数组

var oul = document.getElementById(‘ul‘);
var obtn = document.getElementById(‘btn‘);
//获取DOM节点

var str = ‘‘;// 存储数据的内容

var num1 = 1;// 数据页数
var num = 8;// 点击添加几个

for(var i = 0;i < num; i++){
str += ‘<li>‘ + arr[i] + ‘</li>‘;// 首次数据显示
}

var num2 = Math.ceil(arr.length/num);// 获取数据总页数

oul.innerHTML = str;// 添加到页面上

obtn.onclick = function(){

str = ‘‘; // 让页面为空
num1++;// 页数++

if(num1 == num2){// 判断
num = num + 8;
var num3 = Math.abs(arr.length - num1 * 8);//5

num = num - num3;

obtn.style.display = ‘none‘;

}else{
num = num + 8;
}

for(var i = 0;i < num; i++){// 加载更多数据
str += ‘<li>‘ + arr[i] + ‘</li>‘;
}
oul.innerHTML = str;
}

//  觉得有用的话,点个赞.  写的比较简单