kaodian
v1.0.0
Published
```js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./page.css"> </head> <body> <div
Downloads
2
Readme
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./page.css">
</head>
<body>
<div class="box">
<!-- <dl>
<dd><img src="./img/2.jpg" alt=""></dd>
<dt>秀的冒汗，你是在逗我吗？？？？？<br><span>$2631</span></dt>
</dl> -->
</div>
<div class="wrap">
<span class="first">首页</span>
<ul class="list">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<span class="last">尾页</span>
<span class="per"><</span><span class="next">></span></div>
<script src="./js/axios.js"></script>
<script>
let index=0,
num=6;
let list=document.querySelector(".list");
function getData(){
axios.post("/api/list",{
index,num,
}).then(result=>{
if(result.data.code){
ranData(result.data);
console.log(result.data);
}
})
}
let box=document.querySelector(".box");
function ranData(data){
box.innerHTML=data.arr.map(item=>{
return `<dl>
<dd><img src="${item.img}" alt=""></dd>
<dt>${item.title}<br><span>$${item.num}</span></dt>
</dl>`
}).join("");
let leng="";
for(let i=0;i<data.maxlen;i++){
leng+=`<li ind=${i} class=${i===index?"active":""}>${i+1}</li>`;
}
list.innerHTML=leng;
}
getData();
let next=document.querySelector(".next");
let per=document.querySelector(".per");
document.onclick=e=>{
let tar=e.target;
if(tar.className==="next"){
index++;
if(index>list.children.length-1){
index=0;
}
getData();
}
if(tar.className==="per"){
index--;
if(index<0){
index=list.children.length-1;
}
getData();
}
if(tar.nodeName==="LI"){
index=tar.innerHTML-1;
getData();
}
if(tar.className==="first"){
index=0;
getData();
}
if(tar.className==="last"){
index=list.children.length-1;
getData();
}
}
</script>
</body>
</html>