码迷,mamicode.com
首页 > Web开发 > 详细

js分页

时间:2015-04-26 06:56:29      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
a{ margin:5px;}
</style>
<script>
window.onload = function(){
    
    page({
    
        id : div1,
        nowNum : 7,
        allNum : 10,
        callBack : function(now,all){
        
            alert(当前页: + now +,总共页:+all);
        
        }
    
    });
    
};

function page(opt){

    if(!opt.id){return false};
    
    var obj = document.getElementById(opt.id);
    
    var nowNum = opt.nowNum || 1;
    var allNum = opt.allNum || 5;
    var callBack = opt.callBack || function(){};
    
    if( nowNum>=4 && allNum>=6 ){
    
        var oA = document.createElement(a);
        oA.href = #1;
        oA.innerHTML = 首页;
        obj.appendChild(oA);
    
    }
    
    if(nowNum>=2){
        var oA = document.createElement(a);
        oA.href = # + (nowNum - 1);
        oA.innerHTML = 上一页;
        obj.appendChild(oA);
    }
    
    if(allNum<=5){
        for(var i=1;i<=allNum;i++){
            var oA = document.createElement(a);
            oA.href = # + i;
            if(nowNum == i){
                oA.innerHTML = i;
            }
            else{
                oA.innerHTML = [+ i +];
            }
            obj.appendChild(oA);
        }    
    }
    else{
    
        for(var i=1;i<=5;i++){
            var oA = document.createElement(a);
            
            
            if(nowNum == 1 || nowNum == 2){
                
                oA.href = # + i;
                if(nowNum == i){
                    oA.innerHTML = i;
                }
                else{
                    oA.innerHTML = [+ i +];
                }
                
            }
            else if( (allNum - nowNum) == 0 || (allNum - nowNum) == 1 ){
            
                oA.href = # + (allNum - 5 + i);
                
                if((allNum - nowNum) == 0 && i==5){
                    oA.innerHTML = (allNum - 5 + i);
                }
                else if((allNum - nowNum) == 1 && i==4){
                    oA.innerHTML = (allNum - 5 + i);
                }
                else{
                    oA.innerHTML = [+ (allNum - 5 + i) +];
                }
            
            }
            else{
                oA.href = # + (nowNum - 3 + i);
                
                if(i==3){
                    oA.innerHTML = (nowNum - 3 + i);
                }
                else{
                    oA.innerHTML = [+ (nowNum - 3 + i) +];
                }
            }
            obj.appendChild(oA);
            
        }
    
    }
    
    if( (allNum - nowNum) >= 1 ){
        var oA = document.createElement(a);
        oA.href = # + (nowNum + 1);
        oA.innerHTML = 下一页;
        obj.appendChild(oA);
    }
    
    if( (allNum - nowNum) >= 3 && allNum>=6 ){
    
        var oA = document.createElement(a);
        oA.href = # + allNum;
        oA.innerHTML = 尾页;
        obj.appendChild(oA);
    
    }
    
    callBack(nowNum,allNum);
    
    var aA = obj.getElementsByTagName(a);
    
    for(var i=0;i<aA.length;i++){
        aA[i].onclick = function(){
            
            var nowNum = parseInt(this.getAttribute(href).substring(1));
            
            obj.innerHTML = ‘‘;
            
            page({
            
                id : opt.id,
                nowNum : nowNum,
                allNum : allNum,
                callBack : callBack
            
            });
            
            return false;
            
        };
    }

}
</script>
</head>

<body>
<div id="div1">
    <!--<a href="#1">首页</a>
    <a href="#3">上一页</a>
    <a href="#2">[2]</a>
    <a href="#3">[3]</a>
    <a href="#4">4</a>
    <a href="#5">[5]</a>
    <a href="#6">[6]</a>
    <a href="#5">下一页</a>
    <a href="#10">尾页</a>-->
    

</div>
</body>
</html>

 

js分页

标签:

原文地址:http://www.cnblogs.com/liujin0505/p/4457230.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!