一、把鼠标变成小手:cursor:pointer;
二、分析:
1、分页实现的逻辑:就是从原始数组中截取一个新的数组,用这个新的数组进行渲染;
截取数组的时候不可以改变新数组,所以我们需要用slice的方法
2、第一步:当我们页面一打开
->我们需要截取一个数组,并组成一个新的数组,且还不影响原数组
->里面的数据是根据当前页和当前页的数量进行计算的
->使用截取出来的数据渲染我们的页面
->根据当前页或者是下一页判断是否需要disabled类名
->根据当前页的数量,去判断我们有多少页
第二步:点击下一步按钮时
->我们需要把当前页面的数字更换为下一页数字
->重新截取一组数据
->使用截取的数据重新渲染页面
->根据当前页判断上一页或者下一页是否需要disabled
->根据当前页的数量,去判断我们有多少页
第三步:点击上一步按钮时
->我们需要把当前页面的数字更换为上一页的数字
->重新截取一组数据
->使用截取的数据重新渲染页面
->根据当前页判断上一页或者下一页是否需要disabled
->根据当前页的数量,去判断我们有多少页
第四步:当我们点击选择有多少条的时候
->需要把显示的条数显示出来
->需要重新截取一组数据
->使用截取的数据重新渲染页面
->根据当前页判断上一页或者下一页是否需要disabled
->根据当前页的数量,去判断我们有多少页
综上可得:我们一直在重复执行一段代码,这些可以进行封装,在使用的时候进行调用;
3、简化可得:
第一步:页面一打开,调用一次函数;
第二步:点击下一步按钮,调用一次函数;
第三步:点击上一步按钮,调用一次函数;
第四步:点击选择数量,调用一次函数;
4、我们需要两个变量,一个表示页(current) 一个表示一页有多少条(pagesize);
5、按照规律获取截取数组的开始索引和结束索引
[(current - 1) * pagesize] - [current * pagesize - 1]
6、截取数组:使用slice的时候我们需要注意,这个是包前不包后的,所以我们需要把截取的索引+1,才可以得到我们想要截取到的数据==[(current - 1) * pagesize] - [current * pagesize ];
7、开始准备前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.header,
.footer,
.content {
width: 1200px;
margin: 0 auto;
}
.header,
.footer {
display: flex;
justify-content: center;
align-items: center;
background-color: skyblue;
color: #fff;
}
.header {
font-size: 30px;
height: 80px;
}
.footer {
font-size: 100px;
height: 300px;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 10px auto;
}
.content>li {
border: 1px solid #333;
width: 280px;
margin-bottom: 10px;
}
li>img {
width: 100%;
height: 350px;
}
li>p {
padding: 2px 10px;
}
.pagination {
width: 1200px;
height: 40px;
margin: 0 auto;
display: flex;
align-items: center;
}
.pagination>span {
padding: 5px 10px;
background-color: skyblue;
color: #fff;
font-size: 20px;
cursor: pointer;
}
/*
span.disable
需要同时满足 标签名是 span 并且 类名是 disable
*/
.pagination>span.disable {
background-color: #ccc;
cursor: not-allowed;
}
.pagination>p {
font-size: 20px;
margin: 0 20px;
}
.pagination>select {
padding: 3px 10px 3px 20px;
font-size: 20px;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="header">网页头部</div>
<div class="pagination">
<span class="prev disable"><</span>
<p class="total"> 1 / 10 </p>
<span class="next ">></span>
<select>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="12">12</option>
</select>
</div>
<ul class="content">
<!-- <li>
<img src="" alt="">
<p>2020西太湖国际音乐节</p>
<p>城市: 常州</p>
<p>地址: 常州西太湖中国花卉博览景区北门</p>
<p>价格: 199-399</p>
<p>演出时间: 2020.09.19-09.20</p>
</li> -->
</ul>
<div class="footer">网页底部</div>
<script src="./dm_list.js"></script>
<script>此段代码在下一部分</script>
</body>
</html>
8、补充JS部分代码
// 获取页面的元素
var ulbox = document.querySelector('ul')
var prevbox = document.querySelector('.prev')
var nextbox = document.querySelector('.next')
var totalBox = document.querySelector('.total')
var selectBox = document.querySelector('select')
// 设置页数和一页有多少个的变量,假设一页4个
var current = 1;
var pagesize =4;
// 打开页面需要优先执行一次
bindHtml()
// 函数的封装
function bindHtml(){
// 先有一个新的数组存放截取的数据
var bindList = list.slice([current - 1]*pagesize,current*pagesize)
// 准备一个空字符串,接收数据,便于渲染页面
var str = ''
// 遍历数组,进行截取数据
bindList.forEach(function(item){
str += `
<li>
<img src="${item.pic}" alt="">
<p>${item.name}</p>
<p>城市: ${item.city}</p>
<p>地址: ${item.address}</p>
<p>价格: ${item.price}</p>
<p>演出时间: ${item.showtime}</p>
</li>
`
})
// 进行页面渲染
ulbox.innerHTML = str
// 这里需要计算我们总共多少条,一页多少条,注意取整问题
total = Math.ceil(list.length / pagesize)
// 把这个数据渲染到页面上,显示当前页和总共页数
totalBox.innerHTML = current + '/' +total
// 判断上一页是否需要disable
if(current === 1){
prevbox.className = 'prev disable'
}else{
prevbox.className = 'prev'
}
// 也可以修改为三目
// prevbox.className = current ===1 ? 'prev disable' : 'prev'
// 判断下一页是否需要disable
nextbox.className = current ===total ? 'next disable' : 'next'
}
// 点击上一步按钮,调用一次函数
prevbox.onclick = function(){
// 这里需要进行判断,一定不用点击的情况
if(current === 1) return
current--
bindHtml()
}
// 点击下一步按钮,调用一次函数
nextbox.onclick = function(){
if(current === total) return
current++
bindHtml()
}
// 点击选择数量,调用一次函数
selectBox.onchange = function(){
pagesize = selectBox.value - 0
current = 1
bindHtml()
}