当前位置:首页 > 网站维护 > 列表

JS文章列表Li分页案例

来源:浦一科技点击:时间:2018/11/27 关键词:上海网站制作公司
HTML代码上海网站制作公司<ulid="all"><li>上海网页设计公司</li><li>上海网站制作公司</li><li>上海网站制作需要多少钱</li><li&g
HTML 代码  上海网站制作公司
<ul id="all">
<li>上海网页设计公司</li>
<li>上海网站制作公司</li>
<li>上海网站制作需要多少钱</li>
<li>上海网站设计哪家强</li>
<li>上海网站制作需要多少钱</li>
<li>上海网页设计多少钱</li>
</ul>
<div class="page">第<span id="a2"></span>/<span id="a1"></span>页<span id="a3"></span>
<a href="#" onClick="change(--pageno)">上一页</a>
<a href="#" onClick="change(++pageno)">下一页</a>
</div>
JS 代码
<script>
	var a = document.getElementById("all").getElementsByTagName("li");
	var zz =new Array(a.length);
	for(var i=0;i <a.length;i++){ 
		zz[i]=a[i].innerHTML;
    } //div的字符串数组付给zz
	var pageno=1 ;              //当前页
	var pagesize=9;            //每页多少条信息
	if(zz.length%pagesize==0){
		var  pageall =zz.length/pagesize ;
	}else{
		var  pageall =parseInt(zz.length/pagesize)+1;  
	}   //一共多少页     
	
	function change(e){
		pageno=e;
		if(e<1){ //如果输入页<1页
			e=1;pageno=1;//就等于第1页 , 当前页为1
		}
	    if(e>pageall){  //如果输入页大于最大页
			e=pageall;pageno=pageall; //输入页和当前页都=最大页
		}
		document.getElementById("all").innerHTML=""//全部清空
			for(var i=0;i<pagesize;i++){
				var div =document.createElement("li")//建立div对象
				div.innerHTML=zz[(e-1)*pagesize+i]//建立显示元素
				document.getElementById("all").appendChild(div)//加入all中 
				if(zz[(e-1)*pagesize+i+1]==null) break;//超出范围跳出
	        }
		var ye="";
		for(var j=1;j<=pageall;j++){
	 		if(e==j){
				ye=ye+"<span><a href='#' onClick='change("+j+")' style='color:#FF0000'>"+j+"</a></span> "
			}else{
				ye=ye+"<a href='#' onClick='change("+j+")'>"+j+"</a> "
			}
		}
		document.getElementById("a1").innerHTML=pageall;
		document.getElementById("a2").innerHTML=pageno;
		document.getElementById("a3").innerHTML=ye;
	}
	change(1);
</script>

服务项目

网站建设

网站建设

通过SEO优化技术,提供更多的展示机会,带来大量精准流量和询盘,每月意向客户增长20%。

手机网站建设

手机网站建设

手机网站的时代强势来袭,赢在全网营销时代,手机+电脑双剑合璧,把握商机滴水不漏。

网站维护

网站维护

一个好的网站需要定期或不定期地更新内容,才能不断地吸引更多的浏览者,增加访问量。

整合网络营销

整合营销

为了建立、维护和传播品牌,以及加强客户关系,而对品牌进行计划、实施和监督的一系列营销

预约建站
免费提供网站优化
领取关键词