84 lines
1.7 KiB
HTML
84 lines
1.7 KiB
HTML
<!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>
|
|
<style>
|
|
body,li{
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
li {
|
|
width: 20%;
|
|
margin-bottom: 30px;
|
|
}
|
|
li img {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<ul>
|
|
</a>
|
|
</ul>
|
|
|
|
<button>点我</button>
|
|
<div class="result"></div>
|
|
</body>
|
|
<script src="./http.js"></script>
|
|
<script>
|
|
let page = 1, total_page = 0;
|
|
|
|
let getList = async () => {
|
|
let res = await http.get({
|
|
url: 'http://127.0.0.1:3000/api/json/classList',
|
|
data: {
|
|
id: 253,
|
|
page
|
|
}
|
|
});
|
|
total_page = res.total_page
|
|
renderPage(res)
|
|
}
|
|
|
|
let renderPage = (res) => {
|
|
res.data.forEach(v => {
|
|
$("ul").innerHTML += `
|
|
<li>
|
|
<a target="_blank" href="./info.html?id=${v.id}&total=${v.total}">
|
|
<img src="${v.preview}" alt="">
|
|
<p>${v.title}</p>
|
|
</a>
|
|
</li>`
|
|
});
|
|
}
|
|
|
|
|
|
$("button").onclick = () => {
|
|
page +=1;
|
|
if (page <= total_page) {
|
|
getList()
|
|
} else {
|
|
$(".result").innerText = "没有数据了"
|
|
}
|
|
}
|
|
|
|
|
|
|
|
getList()
|
|
|
|
|
|
|
|
|
|
function $(className) {
|
|
return document.querySelector(className);
|
|
}
|
|
</script>
|
|
</html> |