<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</title>
<style>
body,
ul,
li {
padding: 0;
margin: 0;
font-family: "微软雅黑";
font-size: 14px;
}
li {
list-style: none;
}
#newsList {
width: 500px;
border: 1px solid #CECECE;
}
#newsList li {
height: 36px;
line-height: 36px;
padding: 0 8px;
margin: 0 10px;
border-bottom: 1px solid #CECECE;
}
#newsList li:last-child {
border-bottom: none;
}
#pages li {
float: left;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
}
#pages li span {
display: inline-block;
padding: 10px;
margin: 0 10px;
border: 1px solid #ccc;
cursor: pointer;
}
#pages .pageNum {
border: none;
padding: 0;
}
</style>
</head>
<body>
<ul id="newsList">
</ul>
<ul id="pages">
<li>首页
</li>
<li>上一页
</li>
<li class="pageNum"></li>
<li>下一页
</li>
<li>尾页
</li>
</ul>
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<script>
var oNewsList = document.getElementById("newsList");
var oPage = document.getElementById("pages");
var aPages = oPage.children;
ajax("data.json", showList);
function showList(data) {
data = JSON.parse(data);
var totalNums = data.length;
var numPerPage = 5;
var pages = Math.ceil(totalNums / numPerPage);
var curIndex = 0;
var str = "";
for (let i = 0; i < pages; i++) {
str += `<span>${i+1}</span>`;
}
aPages[2].innerHTML = str;
function show(curIndex) {
var str1 = "";
for (let i = curIndex * numPerPage; i < Math.min((curIndex + 1) * numPerPage, totalNums); i++) {
str1 += `<li>${data[i]}</li>`;
}
oNewsList.innerHTML = str1;
}
show(curIndex);
aPages[0].onclick = function() {
curIndex = 0;
show(curIndex);
}
aPages[1].onclick = function() {
curIndex--;
if (curIndex == -1) {
curIndex = 0;
}
show(curIndex);
}
aPages[3].onclick = function() {
curIndex++;
if (curIndex == pages) {
curIndex = pages - 1;
}
show(curIndex);
}
aPages[4].onclick = function() {
curIndex = pages - 1;
show(curIndex);
}
var aSpans = aPages[2].children;
for (let i = 0; i < aSpans.length; i++) {
aSpans[i].onclick = function() {
curIndex = i;
show(curIndex);
}
}
}
</script>
</body>
</html>```
--引入的Ajax封装部分--
//ajax.js
function ajax(url, fn) {
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else {
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get", url, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
fn(data);
}
}
}
}
--JSON数据部分--
//data.json
["李白", "杜甫", "汪伦", "商隐", "居易", "苏轼", "王维", "杜牧", "知章", "清照", "浩然", "陆游", "安石", "弃疾", "万里", "韩愈", "欧阳", "司马", "松陵", "精卫", "歌德", "伯伦", "徽因", "杨绛", "志摩", "木心", "渊明", "唐寅", "岑参", "韩非", "庭筠", "苏辙", "纳兰"]
