原生 js 寫分頁

時間 2019-11-12
原文原文鏈接
歡迎留言或者加本人QQ172360937諮詢html
這段代碼是用原生 js 寫的一個分頁的效果web
<!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。