<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>new Oject()</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#go,#sum {
width: 50px;
text-align: center;
height: 30px;
}
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 60%;
text-align: center;
margin: 10px auto;
}
.page {
width: 80%;
text-align: center;
margin: 0 auto;
}
tr {
height: 30px;
}
tr:nth-of-type(even) {
background: #f5f5f5;
}
tr:nth-of-type(1) td {
font-weight: bold;
}
button {
width: 80px;
height: 30px;
}
</style>
<script>
//分頁的基本參數
var arr = [];//存放對象的數組
var pageNum = 0;//當前的頁碼
var rowNum = 0;//起始行號
const pageCount = 7;//常量
//保存當前的頁碼到本地存儲器
localStorage.setItem("pageNum", pageNum);
//字符字符數組
var ch = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', //
'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', //
'r', 's', 't', 'u', 'v', 'w', 'y', 'z', //
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', //
'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', //
'R', 'S', 'T', 'U', 'V', 'W', 'Y', 'Z', 'X', 'x', //
'0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
//獲得隨機用戶名的函數
function getName() {
var name = "";
for (var i = 0; i < 6; i++) {
var index = Math.floor(Math.random() * ch.length);
name += ch[index];
}
return name;
}
//產生103個對象的并存放到數組arr中
for (var i = 0; i < 103; i++) {
//聲明對象
var person = new Object();
//判斷數據類型
// alert(person instanceof Object);
//聲明屬性
person.name = getName();
person.age = Math.floor(Math.random() * 8) + 18;
person.gender = Math.floor(Math.random() * 10) % 2 == 0 ? "男" : "女";
person.score = Math.floor(Math.random() * 41) + 60;
person.id = i + 1;
arr.push(person);
}
//初始化過后才能計算數量
var totalPage = Math.ceil(arr.length / pageCount);//對象總數
var totalCount = arr.length;//總頁數
//上一頁
function prePage() {
//從本地存貯器中取出頁碼
var num = localStorage.getItem("pageNum");
num--;
if (num <= 0) {
num = 1;
}
//保存當前頁碼
localStorage.setItem("pageNum", num);
document.getElementById("go").value = num;
//計算起始位置
rowNum = (num - 1) * pageCount;
//計算結束的位置
var end = rowNum + pageCount;
if (end > totalCount) {
end = totalCount;
}
var arrList = [];
//保存分頁的對象數組
for (var i = rowNum; i < end; i++) {
arrList.push(arr[i]);
}
//拼接頁面的表格
init(arrList);
}
//下一頁
function sufPage() {
var num = localStorage.getItem("pageNum");
//alert(num);
//alert(arr.length);
num++;
if (num > totalPage) {
num = totalPage;
}
// alert(num);
localStorage.setItem("pageNum", num);
document.getElementById("go").value = num;
rowNum = (num - 1) * pageCount;
// alert(rowNum);
var end = rowNum + pageCount;
if (end > totalCount) {
end = totalCount;
}
// alert(end);
var arrList = [];
for (var i = rowNum; i < end; i++) {
arrList.push(arr[i]);
// alert(arr[i].name);
}
init(arrList);
}
//尾頁
function lastPage() {
var num = totalPage;
localStorage.setItem("pageNum", num);
document.getElementById("go").value = num;
rowNum = (num - 1) * pageCount;
var end = rowNum + pageCount;
if (end > totalCount) {
end = totalCount;
}
var arrList = [];
for (var i = rowNum; i < end; i++) {
arrList.push(arr[i]);
}
init(arrList);
}
//首頁
function firstPage() {
localStorage.setItem("pageNum", 1);
var arrList = [];
for (var i = 0; i < 7; i++) {
arrList.push(arr[i]);
}
init(arrList);
document.getElementById("go").value = 1;
}
//到第n頁
function goPage() {
//獲得頁面輸入框的值
var go = document.getElementById("go");
var num = go.value;
if (num <= 0) {
num = 1;
} else if (num > totalPage) {
num = totalPage;
}
localStorage.setItem("pageNum", num);
document.getElementById("go").value = num;
rowNum = (num - 1) * pageCount;
var end = rowNum + pageCount;
if (end > totalCount) {
end = totalCount;
}
var arrList = [];
for (var i = rowNum; i < end; i++) {
arrList.push(arr[i]);
}
init(arrList);
}
/**
* 初始化頁面
* @param list 傳遞的對象數組
*/
function init(list) {
var body = document.getElementsByTagName("body")[0];
//獲得頁面的第一個子元素，如果是表格就刪除
var f = body.firstElementChild;
if (f.tagName == "TABLE") {
body.removeChild(f);
}
//創建表格拼接數據
var tb = document.createElement("table");
tb.style.border = "1px solid black";
tb.style.collapse = "collapse";
var tr = document.createElement("tr");
var td = document.createElement("td");
td.innerText = "序號";
tr.appendChild(td);
td = document.createElement("td");
td.innerText = "姓名";
tr.appendChild(td);
td = document.createElement("td");
td.innerText = "年齡";
tr.appendChild(td);
td = document.createElement("td");
td.innerText = "性別";
tr.appendChild(td);
td = document.createElement("td");
td.innerText = "分數";
tr.appendChild(td);
td = document.createElement("td");
td.innerText = "備注";
tr.appendChild(td);
tb.appendChild(tr);
for (var i = 0; i < list.length; i++) {
tr = document.createElement("tr");
td = document.createElement("td");
td.innerText = list[i].id;
tr.appendChild(td);
td = document.createElement("td");
td.innerText = list[i].name;
tr.appendChild(td);
td = document.createElement("td");
td.innerText = list[i].age;
tr.appendChild(td);
td = document.createElement("td");
td.innerText = list[i].gender;
tr.appendChild(td);
td = document.createElement("td");
td.innerText = list[i].score;
tr.appendChild(td);
td = document.createElement("td");
td.innerText = "";
tr.appendChild(td);
tb.appendChild(tr);
}
body.insertBefore(tb, body.firstElementChild);
}
//初始化頁面
window.onload = function () {
//首次加載第1頁
firstPage();
//寫總頁數到頁面
document.getElementById("sum").value=totalPage;
}
</script>
</head>
<body>
<div class="page">
<button onclick="firstPage()">首頁</button>
<button onclick="prePage()">上一頁</button>
<button onclick="sufPage()">下一頁</button>
<button onclick="lastPage()">尾頁</button>
共<input type="test" id="sum" readonly/>頁，第
<input type="number" min="1" id="go"/>頁
<button onclick="goPage()">點擊跳轉</button>
</div>
</body>
</html>
