1. 程式人生 > >JS分頁

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>

---------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .pageBigBox{
            height:25px;
            float:left;
        }
        .pageBigBox span{
              display: inline;
              float: left;
              color:#999;
              background: #fff;
             }
        .pageBigBox a{
            display: inline-block;
            height:25px;
            padding:0 8px;
            line-height: 25px;
            float:left;
            margin:0 5px;
            font-size:12px;
            background:#e5f0c9;
            text-align: center;
            color:#000;
            text-decoration: none;
        }
        .pageBigBox a:hover{
          background:rgb(200, 212, 123);
          color: #fff;
         }
         .pageBigBox a.lmw-current{
          color: #fff;
          background:rgb(200, 212, 123);
         }
        .pageBox ul li.pageClass {
            width:40px;
            padding:0;
            line-height: normal;
            background:transparent !important;
        }
        .pageBox ul li.pageClass .active{
            background:transparent !important;
        }
    </style>
</head>
<body>
    
    <div class="pageBigBox"></div>
    <script>
        var pageBigBox = document.querySelector(".pageBigBox");

        function pageFunc(conf)
        {
            this.myFunc = conf.click;
            this.total = conf.total;
            this.currentPage = 1;
            this.init(conf);
        }
        pageFunc.prototype.init = function()
        {
            var total = this.total,
                currentPage = this.currentPage,
                _this = this;
            listeners = {
                'setWhat': function(opts)
                {
                    _this.aClick(opts.src);
                    return false;
                }
            };
            listenersPre = {
                'lmw-pre': function(opts)
                {
                    _this.prevClick();
                    return false;
                }
            };
            listenersAdd = {
                'lmw-add': function(opts)
                {
                    _this.addClick();
                    return false;
                }
            }
            var rootele = this.createPage(1, total);
            pageBigBox.innerHTML = rootele;
            o(pageBigBox, ['click'], listeners);
            o(pageBigBox, ['click'], listenersPre);
            o(pageBigBox, ['click'], listenersAdd);
        };
        pageFunc.prototype.createPage = function(page, total)
        {
            console.log("page:" + page + " total: " + total);
            var str = `<a class="lmw-current" href="#">${page}</a>`;
            for (var i = 1; i < 3; i++) {
                if (page - i > 1) {
                    str = `<a class="setWhat" href="#" >${page-i}</a>` + str
                }
                if (page + i < total) {
                    str = str + `<a class="setWhat" href="#" >${(page+i)}</a>`
                }
            };

            if (page - 4 >= 1) {
                str = '<span>...</span>' + str
            };
            if (page + 4 <= total) {
                str = str + '<span>...</span>'
            };
            if (page > 1) {
                str = `<a class="lmw-pre" href="#">上一頁</a><a class="setWhat" href="#">1</a>` + str
            };
            if (page < total) {
                str = str + `<a class="setWhat" href="#">${total}</a><a class="lmw-add" href="#">下一頁</a>`
            };
            return str;
        }
        pageFunc.prototype.prevClick = function()
        {
            var total = this.total;
            var va = --this.currentPage;
            var newret = this.createPage(va, total);
            pageBigBox.innerHTML = newret;
            this.myFunc(va);

        }
        pageFunc.prototype.addClick = function()
        {
            var total = this.total;
            var va = ++this.currentPage;
            var newret = this.createPage(va, total);
            pageBigBox.innerHTML = newret;
            this.myFunc(va);

        }
        pageFunc.prototype.aClick = function(_this)
        {
            var total = this.total;
            var va = parseInt(_this.innerText);
            this.currentPage = va;
            var rootele = this.createPage(va, total);
            pageBigBox.innerHTML = rootele;
            this.myFunc(va);
        }
        function o(dom, event, listeners)
        {
            a(dom, event, function(e){
                var e = e || window.event,
                    src = e.target || e.srcElement,
                    action, returnVal;
                while(src && src !== dom)
                {
                    action = src.getAttribute('attr-action') || src.getAttribute("class");
                    if(listeners[action])
                    {
                        returnVal = listeners[action]({
                            src: src,
                            e: e,
                            action:action
                        });
                        if(returnVal === false)
                        {
                            break;
                        }
                    }
                    src = src.parentNode;
                }
            })
        }
        function a(obj, type, handle)
        {
            if(!obj || !type || !handle)
            {
                return;
            }
            if(obj instanceof Array)
            {
                for(var i = 0, l = obj.length; i < 1; i++)
                {
                    a(obj, type[i], handle);
                }
                return
            }
            function createDelegate(handle, context)
            {
                return function()
                {
                    return handle.apply(context, arguments);
                }
            }
            if(window.addEventListener)
            {
                var wrapper = createDelegate(handle, obj);
                obj.addEventListener(type, wrapper, false);
            }
            else if(window.attachEvent)
            {
                var wrapper = createDelegate(handle, obj);
                obj.attachEvent("on" + type, wrapper)
            }
            else
            {
                obj['on' + type] = handle
            }
        }
        var conf = {
            'total':10,
            'click': function(index){
                console.log(index);
            }
        }
        var page = new pageFunc(conf);
    </script>
</body>
</html>