原生js點擊按鈕加載更多數據
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;
}
// 覺得有用的話,點個贊. 寫的比較簡單
原生js點擊按鈕加載更多數據