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

最新推荐文章于 2024-04-17 10:05:48 发布

转载最新推荐文章于 2024-04-17 10:05:48 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lyw5/p/10313371.html

文章标签：

#前端 #python #javascript #ViewUI

本文介绍如何使用CSS和JavaScript实现网页上列表项的动态加载。通过设置样式和编写JS逻辑，可以按需加载列表内容，提升用户体验。具体包括CSS布局、JS数据处理和动态渲染等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}

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

转载于:https://www.cnblogs.com/lyw5/p/10313371.html