Kaodian NPM | npm.io

<!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>
3 years ago