HTML頁面的按鈕翻頁功能是很常用的，通過簡單翻頁功能可以提升頁面的交互性。下面我們來看看如何設置HTML頁面的簡單按鈕翻頁功能。

<!-- 創建一個簡單的按鈕 -->
<button id="btn">下一頁</button>
<!-- 創建需要翻頁的內容區域 -->
<div id="page">
<p>這是第一頁的內容</p>
<p>這是第二頁的內容</p>
<p>這是第三頁的內容</p>
<p>這是第四頁的內容</p>
</div>
<script>
// 獲取按鈕元素和內容區域元素
var btn = document.getElementById("btn");
var page = document.getElementById("page");
// 當前頁碼
var current = 1;
// 每頁顯示內容數
var pageSize = 2;
// 總頁數
var pageCount = Math.ceil(page.children.length / pageSize);
// 點擊按鈕，翻到下一頁
btn.onclick = function() {
// 如果當前不是最后一頁，可以繼續翻頁
if(current < pageCount) {
// 隱藏當前頁
for(var i = (current-1)*pageSize; i < current*pageSize; i++) {
page.children[i].style.display = "none";
}
// 顯示下一頁
current++;
for(var i = (current-1)*pageSize; i < current*pageSize; i++) {
if(i < page.children.length) {
page.children[i].style.display = "block";
}
}
}
}
</script>

上面的代碼中，我們創建了一個按鈕和一個需要翻頁的內容區域。在JavaScript代碼中，我們獲取了按鈕元素和內容區域元素，并設置了一些基本的翻頁參數，例如每頁顯示內容數、總頁數。在按鈕的點擊事件中，我們根據當前頁碼和總頁數來判斷是否可以繼續翻頁，并且根據當前頁碼和每頁顯示內容數來顯示或隱藏需要翻頁的內容。

通過上面的代碼，我們可以很快地實現一個簡單的HTML頁面的按鈕翻頁功能。如果需要更加豐富的翻頁效果，可以在上面的代碼基礎上進行擴展。