上一页,下一页渲染页面

##上一页,下一页渲染页面
首先是html:

<div id="pageNum"><button>1button><button>1button>  div><button onclick="first()">首页button><button onclick="perv()">上一页button><button onclick="next()">下一页button><button onclick="last()">末页button><ul id="ul">ul><p>共:<span id="pageSum">span>页当前:<span id="page">span>p><button>下一页button>

下面是js:

 <script>var arr=["a","b","c","d","e","f","g","h",];var page=1;//页数var limit=2//每页显示条数function perv(){if(page>1){page-=1;var nowArr=arr.slice((page-1)*limit,page*limit)console.log(nowArr)}else{alert("这是首页")}}//这是下一页function next(){if(page<Math.ceil(arr.length/limit)){//页数page+=1;var nowArr=arr.slice((page-1)*limit,page*limit);console.log(nowArr)}else{alert("这是最后一页")}}//这是第一页function first(){page=1;var nowArr=arr.slice((page-1)*limit,page*limit);console.log(nowArr)}//这是最后一页function last(){page=Math.ceil(arr.length/limit);var nowArr=arr.slice((page-1)*limit,page*limit);console.log(nowArr)}window.onload=function(){var nowArr=arr.slice((page-1)*limit,page*limit);console.log(nowArr);var sum=Math.ceil(arr.length/limit);var str=""for(var i=1;i<=sum;i++){str+=``}document.getElementById("pageNum").innerHTML=str;}//点数字 1 2 3 页function numPage(i){page=i;var nowArr=arr.slice((page-1)*limit,page*limit);console.log(nowArr);}function showli(arr){var str="";for(let i=0;i<arr.length;i++){str+=`
  • ${arr[i]}
  • `
    }document.getElementById("ul").innerHTML=str;}function pageSum(){return Math.ceil(arr.length/limit);}//当前第几页function nowPage(page){document.getElementById("page").innerText=page;}document.getElementById("pageSum").innerText=pageSum();</script>


    本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

    相关文章

    立即
    投稿

    微信公众账号

    微信扫一扫加关注

    返回
    顶部