<!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>
