首頁 > 開發者 > JavaScript
PASTEBIN連結:http://pastebin.com/0N7aSTZe
JS部分代碼
<script language="javascript" >/*全域數組，儲存評論內容*/var arrList = new Array();/*標記當前頁碼*/var nCurPage = 0;/*每頁大小，一個常量*/var PAGE_SIZE = 5;/*一個工具函數，可以很方便的根據id得到標籤對象*/function $(id){return document.getElementById(id);}/*** 添加一個評論到全域列表**/function addCmt(comment){arrList.push(comment);}/*** 根據當前位置和每頁大小來重新整理顯示**/function display(){// 根據列表總長度計算總頁面totalPage = arrList.length/PAGE_SIZE;/*顯示當前頁的內容*/$("comment").innerHTML = "";// 先清空for (c = PAGE_SIZE * nCurPage; c < arrList.length && c < PAGE_SIZE *(nCurPage+1); c++)$("comment").innerHTML += "Page " + nCurPage + ": " + arrList[c] + "<br/>";/*顯示分頁欄目*/$("pager").innerHTML = "";// 先清空for (i = 0; i < totalPage; i ++)$("pager").innerHTML += "<a href='javascript:OnPageChanged(" + i + ")'>第" + i + "頁</a> ";}/*** 使用者點擊page欄的數字* 參數： pageset = 使用者點擊的頁碼**/function OnPageChanged(pageset){// 設定頁面nCurPage = pageset;// 由於頁面變化了，重新整理顯示display();}/*** 使用者點擊添加評論按鈕* 從文字框裡面取出內容，添加到全域列表,* 然後重新整理一些顯示*/function OnAddComment(){// 添加了一個評論addCmt($("cmt").value);// 重新整理顯示display();}</script>
HTML部分代碼
<body><!-- 評論內容 --><input type="text" name="cmt" value="hello"/><!-- 提交按鈕 --><input type="button" value="添加" onclick="OnAddComment();"/><!--一塊用來顯示列表的地區--><div id="comment" style="height:100px;"> </div><!--一塊用來放置頁碼的地區--><div id="pager" > </div></body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
