DEMO1:
很早就想写一些功能性的组件，无奈技术有限一点一点的边工作，边学。
近日工作中用到分页功能，当然由于加快业务进度，第一选择肯定是选择插件，但是实用性来说，还是有那么一点不适合。毕竟插件是通用的。
经过几日加班后回家再熬夜学习。稍有收获。
从最简单的写起：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
margin: 6px;
}
</style>
<script type="text/javascript">
//接之前的逻辑判断 如果 nownum 1了怎么办 变2了 最前也变成 -1 0
//必须再加判断 window.onload = function()
{
page({
id:"div1",
nowNum:5,
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(){};
//写首页 上一页 大于6才能从中间开始向2边扩散
if (nowNum >4 && allNum >=6) {
var oA = document.createElement("a");
oA.href = "#"+1;
oA.innerHTML= "首页";
obj.appendChild(oA);
}
//上一页 大于等于2
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+"]";
}
obj.appendChild(oA);
} //判断最后2页的值 找准规律 6 7 8 9 10
else if((allNum - nowNum) ==0 || (allNum - nowNum) ==1){
oA.href = "#"+ (allNum-5+i);
//重点分析 判断 最后2项 9的时候 10的时候
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)+"]";
}
obj.appendChild(oA); }
else{
oA.href = "#"+ (nowNum-3 + i);
if (nowNum == (nowNum-3 + i)) {
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);
}
//尾页 为什么要大于6 如果只有5张就没必要
if ((allNum-nowNum)>=3 && allNum >=6) {
var oA = document.createElement("a");
oA.href = "#"+ allNum;
oA.innerHTML= "尾页";
obj.appendChild(oA);
}
callback(nowNum,allNum);
var aA = document.getElementsByTagName("a");
for (var i=0; i<aA.length;i++) {
aA[i].onclick=function(){
//alert(this.getAttribute("href").substring(1));
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"></div>
</body>
</html>
稍微再加点料：