无标题文章

function selecPage () {

var n = 0;

$.ajax({

url:"data.json",

async:false,

success:function(e){

n = e.arr;

}

});

return n;

}

function pageAjax (pageNum) {

var arr = selecPage();

var html = '';

var n = pageNum - 1;

arr.forEach(function(v,i){

if(n == i){

html += v;

}

})

$("#box").html(html);

}

pageAjax(1)

var Page = (function(){

var Page = function(obj){

return fn.init(obj);

}

var fn = Page.prototype = {

init:function(obj){

this.pageCount = obj.pageCount;

this.pageSize = obj.pageSize || 7;

this.pageNow = obj.pageNow || 1;

this.containerId = obj.id;

this.container = document.getElementById(this.containerId);

fn.drawPage();

return this;

},

drawPage:function(){

this.container.innerHTML = "";

var front = document.createElement("a");

var next = document.createElement("a");

this.acontainer = document.createElement("sapn");

front.innerHTML = "<";

next.innerHTML = ">";

front.className = "front";

next.className = "next";

this.container.appendChild(front);

$(front).on("click",function(){

fn.frontOrNext(this,true);

fn.inputBox.value = fn.pageNow;

})

$(next).on("click",function(){

fn.frontOrNext(this,false);

fn.inputBox.value = fn.pageNow;

})

this.front = front;

this.next = next;

if(this.pageCount<= this.pageSize){

for( var i=0;i

var a = document.createElement("a");

a.innerHTML = i+1;

$(a).on("click",function(){

Page.alert(this.innerHTML);

Page.select(this,"select");

fn.inputBox.value = this.innerHTML;

})

this.acontainer.appendChild(a);

if(i+1 == this.pageNow){

a.className = "select";

}

}

fn.check();

(this.pageNow == this.pageCount) && (this.next.className += " disable");

(this.pageNow != this.pageCount) && (this.next.className = "next");

}else{

var etc2 = document.createElement("a");

etc2.innerHTML = "...";

etc2.className = "etc";

if(this.pageNow <= this.pageSize -1 ){

for( var i=0;i

var a = document.createElement("a");

a.innerHTML = i+1;

$(a).on("click",function(){

fn.pageNow = this.innerHTML;

Page.alert(this.innerHTML);

Page.select(this,"select");

fn.check();

if(fn.pageNow>=fn.pageSize-1){

fn.reset();

}

etc2.className = "etc";

fn.inputBox.value = this.innerHTML;

})

this.acontainer.appendChild(a);

if(i+1 == this.pageNow){

a.className = "select";

}

}

fn.check();

this.acontainer.appendChild(etc2);

fn.pageN()

}else{

fn.reset();

}

}

var jumpContainer = document.createElement("span");

var span1 = document.createElement("span");

var span2 = document.createElement("span");

var span3 = document.createElement("span");

var span4 = document.createElement("span");

var span5 = document.createElement("span");

var inputBox = document.createElement("input");

var button = document.createElement("input");

inputBox.value = fn.pageNow;

button.value = "确定";

button.type  = "button";

inputBox.className = "box";

button.className  = "BtnSur";

this.inputBox = inputBox;

var _this = this;

$(button).on("click",function(){

var page = fn.inputBox.value.trim();

fn.jump(page);

falBoxInput = page;

if(page >= _this.pageCount){

Page.alert(_this.pageCount);

fn.inputBox.value = _this.pageCount;

}else{

Page.alert(page);

}

var n = $(".select").text();

fn.inputBox.value = n;

})

$(inputBox).on("keyup",function(){

var reg = /^[0-9]*[1-9][0-9]*$/;

(!reg.test(this.value)) && (this.value = "")

})

span1.innerHTML = "共"+this.pageCount+"页";

span2.innerHTML = "到第";

span4.innerHTML = "页";

span1.className = "jumpContainer";

span2.className = "jumpContainer";

span4.className = "jumpContainer";

span3.appendChild(inputBox);

span5.appendChild(button);

jumpContainer.appendChild(span1);

jumpContainer.appendChild(span2);

jumpContainer.appendChild(span3);

jumpContainer.appendChild(span4);

jumpContainer.appendChild(span5);

this.container.appendChild(this.acontainer);

this.container.appendChild(next);

this.container.appendChild(jumpContainer);

},

frontOrNext:function(node,isFront){

if(node.className.indexOf("disable")!=-1){

return;

}

if(isFront){

this.pageNow--;

Page.alert(this.pageNow);

}else{

this.pageNow++;

Page.alert(this.pageNow);

}

this.judge();

},

judge:function(){

if(this.pageNow - this.start>2){

this.reset();

}else{

this.drawPage();

}

},

jump:function(page){

if(page>this.pageCount){

this.pageNow = this.pageCount;

this.drawPage();

return;

}

this.pageNow = page;

if(this.pageNow - this.start > 2){

this.reset();

}else{

this.drawPage();

}

},

check:function(){

if(this.pageNow <=1 ){

this.front.className += " disable";

}else{

this.front.className = "front";

}

},

reset:function(){

this.acontainer.innerHTML="";

var a1 = document.createElement("a");

var a2 = document.createElement("a");

var etc1 = document.createElement("a");

var etc2 = document.createElement("a");

a1.innerHTML = "1";

a2.innerHTML = "2";

etc1.innerHTML = "...";

etc2.innerHTML = "...";

etc1.className = etc2.className = "etc";

this.front.className = "front";

$(a1).on("click",function(){

fn.pageNow = this.innerHTML;

Page.alert(this.innerHTML);

Page.select(this,"select");

fn.drawPage();

fn.inputBox.value = this.innerHTML;

return;

})

$(a2).on("click",function(){

fn.pageNow = this.innerHTML;

Page.alert(this.innerHTML);

Page.select(this,"select");

fn.drawPage();

fn.inputBox.value = this.innerHTML;

return;

})

this.acontainer.appendChild(a1);

this.acontainer.appendChild(a2);

this.acontainer.appendChild(etc1);

var start;

var startCount = this.pageCount - (this.pageSize - 2)+1;

start = this.pageNow - Math.ceil((this.pageSize-2)/2)+1;

if(start >= startCount){

start = startCount;

this.isEnd = true;

}else{

this.isEnd = false

}

this.start = start;

var _this = this;

var n = 0;

for( var i = 0 ; i

var a = document.createElement("a");

a.innerHTML = start+i;

$(a).on("click",function(){

fn.pageNow = this.innerHTML;

Page.alert(this.innerHTML);

Page.select(this,"select");

fn.judge();

fn.inputBox.value = this.innerHTML;

})

n = start+i;

this.acontainer.appendChild(a);

if((start+i)== this.pageNow)a.className = "select";

}

(!this.isEnd) && this.acontainer.appendChild(etc2);

(this.pageNow == this.pageCount) && (this.next.className += " disable");

(this.pageNow != this.pageCount) && (this.next.className = "next");

if(n == this.pageCount-1){

this.acontainer.removeChild(etc2);

fn.pageN()

};

if(n <= (this.pageCount-2)){

fn.pageN()

};

},

pageN : function () {

var endPage = document.createElement("a");

endPage.innerHTML = this.pageCount;

this.acontainer.appendChild(endPage);

$(endPage).on("click",function(){

fn.pageNow = this.innerHTML;

Page.alert(this.innerHTML);

Page.select(this,"select");

fn.check();

if(fn.pageNow>=fn.pageSize-1){

fn.reset();

}

fn.inputBox.value = fn.pageNow;

})

}

}

Page.select = function(node,className){

var aArray = fn.acontainer.getElementsByTagName("a"),

aLength =  aArray.length;

for( var i=0;i<aLength;i++ ){

aArray[i].className ="";

}

node.className = className;

}

Page.alert = function(page){

pageAjax(page)

}

return Page;

})();

window.Page = Page;

var pageCountNum = selecPage().length;

Page({

pageCount : pageCountNum,

pageSize : 7,

pageNow : 1,

id : "pageControl"

});

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,602评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,442评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,878评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,306评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,330评论 5赞 373
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,071评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,382评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,006评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,512评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,732评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,283评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2赞 345

推荐阅读更多精彩内容

  • 无标题文章
    var jumpContainer = document.createElement("span"); ...
    BJ小哇阅读 226评论 0赞 0
  • 无标题文章
    function pageAjax (pageNum) { var arr = selecPage();...
    BJ小哇阅读 215评论 0赞 0
  • js十大设计模式
    工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,718评论 2赞 17
  • js设计模式笔记
    单例模式 适用场景：可能会在场景中使用到对象，但只有一个实例，加载时并不主动创建，需要时才创建 最常见的单例模式，...
    Obeing阅读 2,056评论 1赞 10
  • 第三十六周《精进》
    第一章：时间之尺 理性的看待过去，现在和未来，用郑重的态度过好当下的生活。 做好计划，五年计划，三年计划，年度计划...
    daisy丫头阅读 202评论 0赞 0