當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

新闻标题静态分页 (无刷新)

發布時間：2024/1/17 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了新闻标题静态分页 (无刷新) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

???

一個模板，從數據庫取n條記錄，生成靜態。

做單頁面的靜態化,索引頁面是用JS對數組進行組合的。

因為記錄只是一個標題，一個鏈接，字節數不會太大，

那么用js去用這個大數組進行分頁，貌似不錯,很節約帶寬!

還是很棒的，簡單，實用，值得推薦！

JS代碼：

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('學無止境 25', '#', '(03月17日 23:47)'); ???ii++; item[ii] = new?title_array('學無止境 24', '#', '(03月17日 23:42)'); ???ii++; item[ii] = new?title_array('學無止境 23', '#', '(03月17日 23:32)'); ???ii++; item[ii] = new?title_array('學無止境 22', '#', '(03月17日 23:29)'); ???ii++; item[ii] = new?title_array('學無止境 21', '#', '(03月17日 23:19)'); ???ii++; item[ii] = new?title_array('學無止境 20', '#', '(03月17日 23:15)'); ???ii++; item[ii] = new?title_array('學無止境 19', '#', '(03月17日 23:13)'); ???ii++; item[ii] = new?title_array('學無止境 18', '#', '(03月17日 23:12)'); ???ii++; item[ii] = new?title_array('學無止境 17', '#', '(03月17日 23:10)'); ???ii++; item[ii] = new?title_array('學無止境 16', '#', '(03月17日 22:35)'); ???ii++; item[ii] = new?title_array('學無止境 15', '#', '(03月17日 22:29)'); ???ii++; item[ii] = new?title_array('學無止境 14', '#', '(03月17日 22:28)'); ???ii++; item[ii] = new?title_array('學無止境 13', '#', '(03月17日 22:27)'); ???ii++; item[ii] = new?title_array('學無止境 12', '#', '(03月17日 22:26)'); ???ii++; item[ii] = new?title_array('學無止境 11', '#', '(03月17日 22:24)'); ???ii++; item[ii] = new?title_array('學無止境 10', '#', '(03月17日 22:23)'); ???ii++; item[ii] = new?title_array('學無止境? 9', '#', '(03月17日 22:02)'); ???ii++; item[ii] = new?title_array('學無止境? 8', '#', '(03月17日 22:02)'); ???ii++; item[ii] = new?title_array('學無止境? 7', '#', '(03月17日 22:01)'); ???ii++; item[ii] = new?title_array('學無止境? 6', '#', '(03月17日 21:51)'); ???ii++; item[ii] = new?title_array('學無止境? 5', '#', '(03月17日 21:51)'); ???ii++; item[ii] = new?title_array('學無止境? 4', '#', '(03月17日 21:50)'); ???ii++; item[ii] = new?title_array('學無止境? 3', '#', '(03月17日 21:31)'); ???ii++; item[ii] = new?title_array('學無止境? 2', '#', '(03月17日 21:30)'); ???ii++; item[ii] = new?title_array('學無止境? 1', '#', '(03月17日 21:30)'); ???//要顯示的頁面 ???var?currpage = 1; ???//一頁顯示信息條數為40 ???var?pagesize = 5; ???//頁數維護所顯示的第一頁 ???var?beginpage = 1; ???//頁數維護所顯示的最后一頁 ???var?endpage = 100; ???//顯示某一頁的內容??? ???function?displaypage(onepage) { ?????if?(onepage < 1) { ???????alert("已到達首頁"); ???????return; ?????} ?????var?NumRecords; ?????if?(item.length == 1) { ???????NumRecords = item.length; ?????} else?{ ???????NumRecords = item.length - 1; //信息總條數，減一因為是從下標[1]開始存的信息。 ?????} ?????//沒有信息就返回 ?????if?(NumRecords <= 0) { ???????return?false; ?????} ?????NumPages = Math.floor((NumRecords + (pagesize - 1)) / pagesize); //總頁數 ?????if?(onepage > NumPages) { ???????alert("已經到達尾頁"); ???????return; ?????} ?????currpage = onepage; ?????//該頁的第一行 ?????var?start = pagesize * (currpage - 1) + 1; ?????if?(NumRecords == 1) { ???????start = start - 1; ?????} ?????if?(start >= item.length) return; ?????//裝入該頁內容 ?????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; ?????//如果總頁數不足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> "; ???????showtext += "<a href=\"javascript:displaypage(currpage-1)\">上一頁</a> "; ???????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> "; ?????????if?(currpage1 > 2) { ???????????showtext += "..."; ?????????} ???????} ???????for?(i = currpage1; i <= currpages; i++) { ?????????if?(currpage == (i)) { ???????????showtext += "<a class=\"cur\" href=\"javascript:displaypage("?+ i + ")\">"?+ i + "</a> "; ?????????} else?{ ???????????showtext += "<a href=\"javascript:displaypage("?+ i + ")\">"?+ i + "</a> "; ?????????} ???????} ???????if?(NumPages > 10 && currpages <= NumPages - 1) { ?????????if?(currpages < NumPages - 1) { ???????????showtext += "..."; ?????????} ?????????showtext += "<a href=\"javascript:displaypage("?+ NumPages + ")\">"?+ NumPages + "</a> "; ???????} ???????showtext = showtext + "<a href=\"javascript:displaypage(currpage+1)\">下一頁 </a>"; ???????showtext = showtext + "<a href=\"javascript:displaypage(NumPages)\">>></a></span>"; ?????} ?????document.getElementById("page1").innerHTML = showtext; ???}

調用：

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

演示

學無止境 25(03月17日 23:47)
學無止境 24(03月17日 23:42)
學無止境 23(03月17日 23:32)
學無止境 22(03月17日 23:29)
學無止境 21(03月17日 23:19)

<<?上一頁?1?2?3?4?5?下一頁?>>

? ? 本文轉自曾祥展博客園博客，原文鏈接：http://www.cnblogs.com/zengxiangzhan/archive/2010/03/17/1688097.html，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的新闻标题静态分页 (无刷新)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Android Day05-网络编程之文
下一篇：踩坑之旅：springboot+vue+

编程问答

新闻标题 静态分页 (无刷新)

總結

新闻标题静态分页 (无刷新)