HTML動(dòng)態(tài)分頁顯示代碼的實(shí)現(xiàn)，可以通過JavaScript和CSS來輕松完成。以下是一個(gè)基本的HTML動(dòng)態(tài)分頁顯示代碼實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動(dòng)態(tài)分頁顯示代碼實(shí)例</title>
<style>
#pagination_buttons button {
background-color: #4CAF50;
color: white;
padding: 10px 16px;
margin: 5px;
border-radius: 5px;
border: none;
cursor: pointer;
}
#pagination_buttons button.active {
background-color: #007bff;
}
</style>
</head>
<body>
<div id="data_list"></div>
<div id="pagination_buttons"></div>
<script>
var current_page = 1;
var page_size = 10;
var data = ["數(shù)據(jù)1", "數(shù)據(jù)2", "數(shù)據(jù)3", "數(shù)據(jù)4", "數(shù)據(jù)5", "數(shù)據(jù)6", "數(shù)據(jù)7", "數(shù)據(jù)8", "數(shù)據(jù)9", "數(shù)據(jù)10", "數(shù)據(jù)11", "數(shù)據(jù)12", "數(shù)據(jù)13", "數(shù)據(jù)14", "數(shù)據(jù)15", "數(shù)據(jù)16", "數(shù)據(jù)17", "數(shù)據(jù)18", "數(shù)據(jù)19", "數(shù)據(jù)20", "數(shù)據(jù)21", "數(shù)據(jù)22", "數(shù)據(jù)23", "數(shù)據(jù)24", "數(shù)據(jù)25", "數(shù)據(jù)26", "數(shù)據(jù)27", "數(shù)據(jù)28", "數(shù)據(jù)29", "數(shù)據(jù)30", "數(shù)據(jù)31", "數(shù)據(jù)32", "數(shù)據(jù)33", "數(shù)據(jù)34", "數(shù)據(jù)35", "數(shù)據(jù)36", "數(shù)據(jù)37", "數(shù)據(jù)38", "數(shù)據(jù)39", "數(shù)據(jù)40", "數(shù)據(jù)41", "數(shù)據(jù)42", "數(shù)據(jù)43", "數(shù)據(jù)44", "數(shù)據(jù)45", "數(shù)據(jù)46", "數(shù)據(jù)47", "數(shù)據(jù)48", "數(shù)據(jù)49", "數(shù)據(jù)50"];
var total_page = Math.ceil(data.length / page_size);
function showData() {
var start_index = (current_page - 1) * page_size;
var end_index = start_index + page_size;
var current_data = data.slice(start_index, end_index);
var data_list = document.getElementById("data_list");
data_list.innerHTML = "";
for(var i = 0; i < current_data.length; i++) {
var new_div = document.createElement("div");
new_div.innerHTML = current_data[i];
data_list.appendChild(new_div);
}
}
function showPaginationButtons() {
var pagination_buttons = document.getElementById("pagination_buttons");
pagination_buttons.innerHTML = "";
for(var i = 1; i <= total_page; i++) {
var new_button = document.createElement("button");
new_button.innerHTML = i;
if(i == current_page) {
new_button.classList.add("active");
}
new_button.onclick = (function(page) {
return function() {
current_page = page;
showData();
showPaginationButtons();
}
})(i);
pagination_buttons.appendChild(new_button);
}
}
showData();
showPaginationButtons();
</script>
</body>
</html>以上代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的動(dòng)態(tài)分頁顯示效果，用于展示一份數(shù)據(jù)列表，每頁展現(xiàn)10條數(shù)據(jù)。通過點(diǎn)擊頁碼按鈕可以切換不同頁碼展現(xiàn)不同數(shù)據(jù)。