分页

思路：利用ajax请求数据的总长度，及每页显示的条数，求出需创建总页数
具体代码如下：
html结构代码：

<ul id="list"></ul>
<ul id="btm">
	<li>上一页</li>
	<li>首页</li>
	<li id="osp"></li>
	<li>下一页</li>
	<li>尾页</li>
</ul>

js的实现代码：

var list=document.getElementById("list");
	var btm=document.getElementById("btm");
	var oli=btm.children;
	var osp=document.getElementById("osp");
	
	//发送ajax请求获取数据
	//ajax文件代码在最下面
	ajax("data.json",foo);  //需要引入一个ajax文件
	//定义foo接收返回数据并进行处理
	function foo(data){
		//将数据转成json格式的数据
		 data=JSON.parse(data);
		 var tatalnums=data.length;
		 var pernums=5;  //每页的存放数据
		var numsp=Math.ceil(tatalnums/pernums); //得到具体的页数
	
		//创建具体的页码数字
		var str="";
		for(var i=0;i<numsp;i++){
			str+=`<span>${i+1}</span>`;
		}
		osp.innerHTML=str;
		
		//默认显示第一页的内容
		index=0;
		click(index);
		
		//上一页事件
		var index=0;
		oli[0].onclick=function(){
			index--;
			if(index<=0){
				index=0;
			}
			click(index);
		}
		
		function click(index){
			var str1="";
			for(var i=index*pernums;i<Math.min(data.length,(index+1)*pernums);i++){
				str1+=`<li>${data[i]}</li>`;
			}
			list.innerHTML=str1;
		}
		
		//首页
		oli[1].onclick=function(){
		 	index=0;
		 	click(index);
		}
		
		//下一页
		oli[oli.length-2].onclick=function(){
			index++;
			if(index>=numsp-1){
			index=numsp-1;
			}
			click(index);
		}
		
		//尾页
		oli[oli.length-1].onclick=function(){
			index=numsp-1;
			click(index);
		}
		
		//具体页
		
		var ospan=osp.children;
		for(var i=0;i<ospan.length;i++){
			ospan[i].index=i;
			ospan[i].onclick=function(){
			index=this.index;
				click(index);
			}
		}
	}

data.json存储的数据为
数据是什么倒无所谓，自己设置就好

["111","2222","3333","2222","3333","2222","3333","2222","3333","2222","3333","2222","3333","2222","3333","2222","3333","2222","3333","2222","3333","2222","4444","2222","3333","55555","3333","2222","3333","2222","3333","2222","6666"]

ajax文件代码：

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);
			}
		}
	}
}