欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript 新聞標(biāo)題靜態(tài)分頁代碼 (無刷新)

 更新時(shí)間：2010年03月17日 19:04:45   作者：  
一個(gè)模板，從數(shù)據(jù)庫(kù)取n條記錄，生成靜態(tài)。做單頁面的靜態(tài)化,索引頁面是用JS對(duì)數(shù)組進(jìn)行組合的。
曾祥展   曾祥展
一個(gè)模板，從數(shù)據(jù)庫(kù)取n條記錄，生成靜態(tài)。
做單頁面的靜態(tài)化,索引頁面是用JS對(duì)數(shù)組進(jìn)行組合的。
因?yàn)橛涗浿皇且粋€(gè)標(biāo)題，一個(gè)鏈接，字節(jié)數(shù)不會(huì)太大，
那么用js去用這個(gè)大數(shù)組進(jìn)行分頁，貌似不錯(cuò),很節(jié)約帶寬!
還是很棒的，簡(jiǎn)單，實(shí)用，值得推薦！
JS代碼：
復(fù)制代碼 代碼如下:

function title_array(title, link_add, store_time) {
this.title = title;
this.link_add = link_add;
this.store_time = store_time;
}
var ii = 0;
var item = new Array();
ii++; item[ii] = new title_array('學(xué)無止境 25', '#', '(03月17日 23:47)');
ii++; item[ii] = new title_array('學(xué)無止境 24', '#', '(03月17日 23:42)');
ii++; item[ii] = new title_array('學(xué)無止境 23', '#', '(03月17日 23:32)');
ii++; item[ii] = new title_array('學(xué)無止境 22', '#', '(03月17日 23:29)');
ii++; item[ii] = new title_array('學(xué)無止境 21', '#', '(03月17日 23:19)');
ii++; item[ii] = new title_array('學(xué)無止境 20', '#', '(03月17日 23:15)');
ii++; item[ii] = new title_array('學(xué)無止境 19', '#', '(03月17日 23:13)');
ii++; item[ii] = new title_array('學(xué)無止境 18', '#', '(03月17日 23:12)');
ii++; item[ii] = new title_array('學(xué)無止境 17', '#', '(03月17日 23:10)');
ii++; item[ii] = new title_array('學(xué)無止境 16', '#', '(03月17日 22:35)');
ii++; item[ii] = new title_array('學(xué)無止境 15', '#', '(03月17日 22:29)');
ii++; item[ii] = new title_array('學(xué)無止境 14', '#', '(03月17日 22:28)');
ii++; item[ii] = new title_array('學(xué)無止境 13', '#', '(03月17日 22:27)');
ii++; item[ii] = new title_array('學(xué)無止境 12', '#', '(03月17日 22:26)');
ii++; item[ii] = new title_array('學(xué)無止境 11', '#', '(03月17日 22:24)');
ii++; item[ii] = new title_array('學(xué)無止境 10', '#', '(03月17日 22:23)');
ii++; item[ii] = new title_array('學(xué)無止境 9', '#', '(03月17日 22:02)');
ii++; item[ii] = new title_array('學(xué)無止境 8', '#', '(03月17日 22:02)');
ii++; item[ii] = new title_array('學(xué)無止境 7', '#', '(03月17日 22:01)');
ii++; item[ii] = new title_array('學(xué)無止境 6', '#', '(03月17日 21:51)');
ii++; item[ii] = new title_array('學(xué)無止境 5', '#', '(03月17日 21:51)');
ii++; item[ii] = new title_array('學(xué)無止境 4', '#', '(03月17日 21:50)');
ii++; item[ii] = new title_array('學(xué)無止境 3', '#', '(03月17日 21:31)');
ii++; item[ii] = new title_array('學(xué)無止境 2', '#', '(03月17日 21:30)');
ii++; item[ii] = new title_array('學(xué)無止境 1', '#', '(03月17日 21:30)');
//要顯示的頁面
var currpage = 1;
//一頁顯示信息條數(shù)為40
var pagesize = 5;
//頁數(shù)維護(hù)所顯示的第一頁
var beginpage = 1;
//頁數(shù)維護(hù)所顯示的最后一頁
var endpage = 100;
//顯示某一頁的內(nèi)容
function displaypage(onepage) {
if (onepage < 1) {
alert("已到達(dá)首頁");
return;
}
var NumRecords;
if (item.length == 1) {
NumRecords = item.length;
} else {
NumRecords = item.length - 1; //信息總條數(shù)，減一因?yàn)槭菑南聵?biāo)[1]開始存的信息。
}
//沒有信息就返回
if (NumRecords <= 0) {
return false;
}
NumPages = Math.floor((NumRecords + (pagesize - 1)) / pagesize); //總頁數(shù)
if (onepage > NumPages) {
alert("已經(jīng)到達(dá)尾頁");
return;
}
currpage = onepage;
//該頁的第一行
var start = pagesize * (currpage - 1) + 1;
if (NumRecords == 1) {
start = start - 1;
}
if (start >= item.length) return;
//裝入該頁內(nèi)容
var strText = "";
for (var i = 1; i <= pagesize / 5; i++) {
strText += "<div class=\"title_list\"><ul class=\"title_list bluepoint\">"
for (var j = 1; j <= 5; j++) {
if (start < item.length) {
strText += "<li><a href=\"" + item[start].link_add + "\" target=\"_blank\">" + item[start].title + "</a><span>" + item[start].store_time + "</span></li>";
start++;
}
}
strText += "</ul></div>"
}
document.getElementById("title1").innerHTML = strText;
//如果總頁數(shù)不足5條
if (NumPages < 10) {
beginpage = 1;
endpage = NumPages;
} else {
//如果顯示最前面的5頁
if (currpage <= 5 && currpage > 0) {
beginpage = 1;
endpage = 10;
}
//如果顯示最后面的5頁
if (currpage <= NumPages && currpage > (NumPages - 9)) {
beginpage = NumPages - 9;
endpage = NumPages;
}
//其他情況
if (currpage > 5 && currpage < (NumPages - 9)) {
if (currpage >= (endpage + 1)) {
beginpage += 10;
endpage += 10;
}
if (currpage <= (beginpage - 1)) {
beginpage -= 10;
endpage -= 10;
}
}
}
var showtext = "";
if (NumPages > 0) {
showtext += "<span class=\"tpb_right\"><a href=\"javascript:displaypage(1)\" class=\"tpb_btn_previous\"><<</a>&nbsp;";
showtext += "<a href=\"javascript:displaypage(currpage-1)\">上一頁</a>&nbsp;";
var currpages = currpage < NumPages - 2 ? currpage + 2 : NumPages;
var currpage1 = currpage <= 2 ? 1 : currpage - 2;
if (NumPages <= 10) {
currpage1 = 1;
currpages = NumPages;
} else if (currpage1 >= 2) {
showtext += "<a href=\"javascript:displaypage(1)\">1</a>&nbsp;";
if (currpage1 > 2) {
showtext += "...";
}
}
for (i = currpage1; i <= currpages; i++) {
if (currpage == (i)) {
showtext += "<a class=\"cur\" href=\"javascript:displaypage(" + i + ")\">" + i + "</a>&nbsp;";
} else {
showtext += "<a href=\"javascript:displaypage(" + i + ")\">" + i + "</a>&nbsp;";
}
}
if (NumPages > 10 && currpages <= NumPages - 1) {
if (currpages < NumPages - 1) {
showtext += "...";
}
showtext += "<a href=\"javascript:displaypage(" + NumPages + ")\">" + NumPages + "</a>&nbsp;";
}
showtext = showtext + "<a href=\"javascript:displaypage(currpage+1)\">下一頁&nbsp;</a>";
showtext = showtext + "<a href=\"javascript:displaypage(NumPages)\">>></a></span>";
}
document.getElementById("page1").innerHTML = showtext;
}

調(diào)用：
復(fù)制代碼 代碼如下:

<DIV id=title1> </DIV>
<DIV id=page1 class=turn_page_box> </DIV>
<SCRIPT language=javascript>
//默認(rèn)顯示首頁的內(nèi)容
displaypage(1);
</SCRIPT>

具體的演示代碼:

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]

相關(guān)文章

  • JS獲取屏幕高度的簡(jiǎn)單實(shí)現(xiàn)代碼

    JS獲取屏幕高度的簡(jiǎn)單實(shí)現(xiàn)代碼

    下面小編就為大家?guī)硪黄狫S獲取屏幕高度的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-05-05
  • 詳解webpack babel的配置

    詳解webpack babel的配置

    本篇文章主要介紹了詳解webpack babel的配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-01-01
  • JS基于onclick事件實(shí)現(xiàn)單個(gè)按鈕的編輯與保存功能示例

    JS基于onclick事件實(shí)現(xiàn)單個(gè)按鈕的編輯與保存功能示例

    這篇文章主要介紹了JS基于onclick事件實(shí)現(xiàn)單個(gè)按鈕的編輯與保存功能,結(jié)合實(shí)例形式分析了JS實(shí)現(xiàn)onclick響應(yīng)事件的轉(zhuǎn)換相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2017-02-02
  • javascript 拷貝節(jié)點(diǎn)cloneNode()使用介紹

    javascript 拷貝節(jié)點(diǎn)cloneNode()使用介紹

    這篇文章主要介紹了javascript 節(jié)點(diǎn)操作拷貝節(jié)點(diǎn)cloneNode()的使用,需要的朋友可以參考下
    2014-04-04
  • 解決前端跨域問題方案匯總

    解決前端跨域問題方案匯總

    這篇文章主要介紹了解決前端跨域問題8種方案的相關(guān)資料,需要的朋友可以參考下
    2016-11-11
  • JavaScript對(duì)象學(xué)習(xí)小結(jié)

    JavaScript對(duì)象學(xué)習(xí)小結(jié)

    JavaScript 中的所有事物都是對(duì)象：字符串、數(shù)值、數(shù)組、函數(shù).幾乎用到的每個(gè)js都離不開它的js對(duì)象。此外，JavaScript 允許自定義對(duì)象，下面跟著小編學(xué)習(xí)javascript對(duì)象學(xué)習(xí)小結(jié)，需要的朋友可以參考下
    2015-09-09
  • 小程序中英文混合排序問題解決

    小程序中英文混合排序問題解決

    這篇文章主要介紹了小程序中英文混合排序問題解決,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-08-08
  • js+audio實(shí)現(xiàn)音樂播放器

    js+audio實(shí)現(xiàn)音樂播放器

    這篇文章主要為大家詳細(xì)介紹了js+audio實(shí)現(xiàn)音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-09-09
  • JS匿名函數(shù)實(shí)例分析

    JS匿名函數(shù)實(shí)例分析

    這篇文章主要介紹了JS匿名函數(shù),結(jié)合實(shí)例形式分析了javascript匿名函數(shù)的定義、參數(shù)、返回值等相關(guān)使用方法,需要的朋友可以參考下
    2016-11-11
  • js刪除局部變量的實(shí)現(xiàn)方法

    js刪除局部變量的實(shí)現(xiàn)方法

    下面小編就為大家?guī)硪黄猨s刪除局部變量的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-06-06

最新評(píng)論