分页

一、简单分页
鼠标点击到对应页数上时,字体为白色,背景色为蓝色,点击上/下一页时,页数格里边的内容-10/+10,页数最小值为1,无上限
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>数据分页1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .b1 > ul {
            display: inline-block;
        }

        .b1 > ul > li {
            list-style: none;
            display: inline-block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid silver;
        }

        .b1 > button {
            width: 100px;
            height: 30px;
            border: 1px solid silver;
            background: transparent;
            outline: none;
        }

        .bgcolor {
            background: #32bcff;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="b1">
    <button id="uppage">上一页</button>
    <ul class="menu">
        <li class="bgcolor">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <button id="downpage">下一页</button>
</div>
<script>
    var uppage = document.getElementById("uppage");
    var downpage = document.getElementById("downpage");
    var menu = document.getElementsByClassName("menu")[0].children;
    downpage.onclick = function () {
        for (var i = 0; i < menu.length; i++) {
            menu[i].innerHTML = parseInt(menu[i].innerHTML) + 10;
        }
    }
    uppage.onclick = function () {
        if (parseInt(menu[0].innerHTML) <= 1) {
            return;
        }
        for (var i = 0; i < menu.length; i++) {
            menu[i].innerHTML = parseInt(menu[i].innerHTML) - 10;
        }
    }
    for (var i = 0; i < menu.length; i++) {
        menu[i].onclick = function () {
            for (var k = 0; k < menu.length; k++) {
                menu[k].className = "";
            }
            this.className = "bgcolor";
        }
    }
</script>
</body>
</html>

二、稍复杂分页,实现前缩、后缩、两边缩的分页
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据分页2</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        button {
            outline: none;
            background-color: #fff;
            width: 50px;
            height: 30px;
            border: solid 1px black;
        }

        ul {
            display: inline-block;
            /* width: 252px; */
            height: 30px;
            font-size: 0;
        }

        li {
            display: inline-block;
            width: 30px;
            height: 30px;
            border: solid 1px black;
            font-size: 18px;
            line-height: 30px;
            text-align: center;
            list-style: none;
            margin: 0 2px;
        }
    </style>
</head>

<body>
    <button class="btn">上一页</button>
    <ul class="page">
    </ul>
    <button class="btn">下一页</button>
    <script>
    //先分页,在写前缩、后缩
    //第一个一页一页变化
    //第二个与当前页、总页数有关
window.onload=function(){
    var btn=document.getElementsByClassName("btn");
    var page =document.getElementsByClassName("page")[0];
    var nowpage=6;
    var totalpage=20;
    page.innerHTML= datadivide(nowpage,totalpage);
    btn[0].onclick=function (){
        nowpage--;
        if(nowpage<=1){
            nowpage=1;
        }
        page.innerHTML=datadivide(nowpage,totalpage);
    }
    btn[1].onclick=function(){
        nowpage++;
        if(nowpage>=totalpage){
            nowpage=totalpage;
        }
        page.innerHTML=datadivide(nowpage,totalpage);
    }
    function datadivide(current,totalpage){
        var str="";
        for(var i=1;i<=totalpage;i++){
            if(i==2&&i<current-5){
                i=current-3;
                str+="
  • ...
  • "
    ; } else if(i==(current+3)&&i<totalpage){ i=totalpage-2; str+="
  • ...
  • "
    ; } else { if(i==current){ str+="
  • "+i+"
  • "
    ; } else { str+="
  • "+i+"
  • "
    ; } } } return str; } document.onselectstart=function(){ return false; } } </script> </head> <body> </body> </html>

    你可能感兴趣的:(javascript)