原生 js 写分页

欢迎留言或者加本人QQ172360937咨询
这段代码是用原生 js 写的一个分页的效果
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{padding:0;margin:0;}
        #ul{font-size:0;font-family:Microsoft YaHei;display:inline-block;}
        #ul li{
                -moz-user-select:none;/*火狐*/
                -webkit-user-select:none;/*webkit浏览器*/
                -ms-user-select:none;/*IE10*/
                -khtml-user-select:none;/*早期浏览器*/
                user-select:none;
                list-style: none;float:left;padding:6px;font-size:13px;border:1px solid #ccc;margin:2px;cursor:pointer;color:#585858;}
        
        #div{width:100%;text-align: center;position:absolute;bottom:30px;}
        #ul .background{background:#39C6F4;color:white;border:1px solid #39C6F4;}
    </style>
</head>
<body>
    <div id='div'>
        <ul id='ul'>
            <li>首页</li>
            <li>上一页</li>
            <li></li>
            <li></li>
            <li></li>
            <li>下一页</li>
            <li>尾页</li>
        </ul>
    </div>
    <script>
        var ul = document.getElementById('ul');
        var li = ul.getElementsByTagName('li');
        li[2].className = 'background';
        var num01 = 1;
        var num02 = 800/*总数*/;
//1 //首页的点击事件
            li[li.length-li.length].onclick = function(){
                Background(2);
                num01 = 1;
                content(num01);
            }
//2 //尾页的点击事件
            li[li.length-1].onclick = function(){
                Background(li.length-3);
                num01 = num02-(li.length-5);
                content(num01)
            }
//3 //上一页的点击事件
            li[li.length-(li.length-1)].onclick = function(){

                for(var j = 0;j<li.length-4;j++){
                    if(li[j+2].className == 'background' && li[j+2].innerHTML != 1){
                        if(j+2 != li.length-(li.length-2)){
                            Background(j+1);
                        }
                        break;
                    }
                }
                if(j+2 == li.length-(li.length-2)){
                    num01 -- ;
                    content(num01);
                }
            }
//4 下一页的点击事件
            li[li.length-2].onclick = function(){
                for(var j = 0;j<li.length;j++){
                    if(li[j].className == 'background' && li[j].innerHTML < num02){  //* && 写最后一页的总数*/
                        if(j+1 < li.length-2){
                            Background(j+1);
                        }
                        break;
                    }
                }
                if(j+1 == li.length-2){
                    num01++;
                    content(num01);
                }
            }        
//     分页的点击事件
            for(var i = 0;i<li.length-4;i++){
                li[i+2].index = i+2;
                li[i+2].onclick = function(){
                    Background(this.index);
                }
            }
    //把所有的分页背景去掉，给指定的分页添加背景颜色
            function Background(num){
                for(var i = 0;i<li.length;i++){
                    li[i].className = li[i].className.replace('background','');
                    li[num].className = 'background';
                }
            }
    // 给li 写内容
        content(num01);
            function content(number){
                for(var i=0;i<li.length-4;i++){
                    li[i+2].innerHTML = number;
                    number++;
                }
            }        
    </script>
</body>
</html>