网页分页组件设计与实现

发布时间：2024-12-21 05:54

JavaScript实现网页动态交互 #生活知识# #编程教程#

<!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");

            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>

网址：网页分页组件设计与实现 https://www.yuejiaxmz.com/news/view/530369

⬅️上一篇：运动为什么可以缓解压力

➡️下一篇：心里憋着一股气压抑怎么发泄,1.

网页分页组件设计与实现

相关内容

随便看看

最新动态分享

热点动态分享

专题

推荐动态分享