标签：绿绿 index 分页 JS onePage 2022 time con
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<ul class="newsList">
</ul>
<!-- 分页器 -->
<div class="pageLists">
<button id="first">首页</button>
<button id="pageList_prev">上一页</button>
<div class="pageList"></div>
<button id="pageList_next">下一页</button>
<button id="last">尾页</button>
</div>
</div>
</body>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 400px;
margin: 100px auto;
}
.newsList{
width: 600px;
height: 350px;
background-color: antiquewhite;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.newsList li{
height: 80px;
width: 500px;
list-style: none;
background-color: skyblue;
}
.newsList li span:nth-of-type(1){
font-size: 30px;
font-weight: 600;
}
.pageLists{
width: 600px;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 40px;
}
.pageLists button{
width: 50px;
height: 30px;
border: 1px solid #ccc;
box-sizing: border-box;
cursor: pointer;
}
.pageList{
width: 300px;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.pageList a{
display: block;
text-align: center;
line-height: 30px;
width: 30px;
height: 30px;
box-sizing: border-box;
border: 1px solid #ccc;
cursor: pointer;
}
.pageActive{
background-color: skyblue;
color: #fff;
}
</style>
<script>
const news = [
{
index:'1',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'1',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'1',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'1',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'2',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'2',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'2',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'2',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'3',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'3',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'3',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'3',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'4',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'4',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'4',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'4',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'5',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'5',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'5',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
{
index:'5',
con:'啦啦啦啦啦啦啦啦绿绿绿啦啦啦啦啦',
time:'2022-2-2'
},
];
var newsList = document.querySelector(".newsList")// 获取内容部分
var pageList = document.querySelector(".pageList");// 获取分页器部分
var pageCount = Math.ceil(news.length / 4);// 计算有多少页
var newsArr = [];// 每一页所展示的数据
let onePage = 1;// 根据值显示每页数据
// 渲染新闻数据
let render = function () {
newsList.innerHTML = '';
newsArr = news.slice((onePage - 1) * 4, 4 * onePage)
newsArr.forEach((item,index) => {
newsList.innerHTML +=
`
<li>
<span>${item.index}</span>
<span>${item.time}</span>
<p>${item.con}</p>
</li>
`
})
}
// 初始化
render();
// 初始化分页器样式
for(let i = 1;i <= pageCount;i++){
pageList.innerHTML += '<a>' + i + '</a>'
}
let aList = pageList.querySelectorAll('a');
// 页面刚进来时第一页高亮
aList[onePage - 1].classList.add('pageActive')
// 点击分页器时高亮
aList.forEach((item,index) => {
item.onclick = function(){
for(let i = 0;i < aList.length;i++){
aList[i].classList.remove('pageActive')
}
this.classList.add('pageActive')
onePage = index + 1
render();
}
})
// 上一页和下一页
var next = document.getElementById("pageList_next");
var prev = document.getElementById("pageList_prev");
let changePages = function(){
for(let i = 0;i < aList.length;i++){
aList[i].classList.remove('pageActive')
}
aList[onePage - 1].classList.add('pageActive')
}
// 上一页
prev.onclick = function(){
if(onePage <= 1){
return
}else{
onePage = onePage - 1
changePages()
render()
}
}
// 下一页
next.onclick = function(){
if(onePage >= aList.length){
return
}
onePage = onePage + 1
changePages()
render()
}
// 首页和尾页
var first = document.getElementById("first")
var last = document.getElementById("last")
// 首页
first.onclick = function(){
if(onePage <= 1){
return
}
onePage = 1
changePages()
render()
}
// 尾页
last.onclick = function(){
if(onePage >= pageCount){
return
}
onePage = pageCount
changePages()
render()
}
</script>
</html>
标签：绿绿,index,分页,JS,onePage,2022,time,con 来源： https://www.cnblogs.com/zgjg/p/15964927.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。