125 lines
2.5 KiB
HTML
125 lines
2.5 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>
|
|
ul{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
}
|
|
|
|
ul li{
|
|
width: 20%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<ul>
|
|
|
|
</ul>
|
|
<button>点击</button><div style="display: none;">没了</div>
|
|
</body>
|
|
<script src="./js/index.js"></script>
|
|
<script>
|
|
let page =1, max=0;
|
|
eee();
|
|
function eee() {
|
|
|
|
|
|
//promise
|
|
|
|
let index = async () => {
|
|
let se = await http.get({
|
|
url: "http://127.0.0.1:3000/api/json/classList",
|
|
data: {
|
|
id : 253,
|
|
page
|
|
}
|
|
})
|
|
console.log(se)
|
|
max=se.result.total_page
|
|
|
|
se.result.data.forEach(v => {
|
|
$("ul").innerHTML+= `
|
|
<li>
|
|
<a target="_blank" href="./index2.html?id=${v.id}&total=${v.total}"">
|
|
<img src="${v.preview}" alt="">
|
|
<div>${v.title}</div>
|
|
</a>
|
|
</li>`
|
|
});
|
|
|
|
}
|
|
|
|
index();
|
|
|
|
$("button").onclick=()=>{
|
|
page+=1
|
|
if(page==max){
|
|
$("div").style.display="block"
|
|
}else{
|
|
index();
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//callback 获取异步返回值
|
|
|
|
// http.get({
|
|
// url: "http://127.0.0.1:3000/api/json/index",
|
|
|
|
// success:(e)=>{
|
|
// console.log(e)
|
|
// e.result.list.forEach(v => {
|
|
// $(".qwe").innerHTML +=`<img src="${v.img_src}" alt="">`
|
|
// });
|
|
|
|
// },
|
|
// error:(er)=>{
|
|
|
|
// }
|
|
// })
|
|
|
|
|
|
|
|
|
|
// let xhr = new XMLHttpRequest();
|
|
|
|
// xhr.open("GET", "http://127.0.0.1:3000/api/json/index")
|
|
// xhr.setRequestHeader()
|
|
// xhr.timeout()
|
|
// xhr.send()
|
|
|
|
// xhr.onreadystatechange = () => {
|
|
// if (xhr.readyState == "4") {
|
|
// if (xhr.status == "200") {
|
|
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function $(name) {
|
|
return document.querySelector(name);
|
|
}
|
|
function _(name) {
|
|
return document.querySelectorAll(name);
|
|
}
|
|
|
|
</script>
|
|
|
|
</html> |