<body>
<!–一塊用來顯示列表的區域–>
<p id="comment"> </p>
<!–一塊用來放置頁碼的區域–>
<p id="pager" > </p>
<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>
<input type="text" name="cmt" value="hello"/>
<input type="button" value="添加" onclick="OnAddComment();"/>
</body>
摘自 開心樂源的專欄