// An highlighted block<script>var uppage = document.getElementById("uppage");var downpage = document.getElementById("downpage");var menu = document.getElementsByClassName("menu")[0].children;
downpage.onclick=function(){for(var i =0; i < menu.length; i++){
menu[i].innerHTML =parseInt(menu[i].innerHTML)+10;}}
uppage.onclick=function(){if(parseInt(menu[0].innerHTML)<=1){return;}for(var i =0; i < menu.length; i++){
menu[i].innerHTML =parseInt(menu[i].innerHTML)-10;}}for(var i =0; i < menu.length; i++){
menu[i].onclick=function(){for(var k =0; k < menu.length; k++){
menu[k].className ="";}this.className ="bgcolor";}}</script>
数据分页算法(复杂)
HTML布局
// An highlighted block<!DOCTYPE html><html><head></head><body><div class="b1"><button id="uppage">上一页</button><ul class="menu"></ul><button id="downpage">下一页</button></div></body></html>
CSS样式
// An highlighted block<style>*{
margin:0;
padding:0;}.b1 > ul {
display: inline-block;}.b1 > ul > li {
list-style: none;
display: inline-block;
width:30px;
height:30px;
text-align: center;
line-height:30px;
border:1px solid silver;}.b1 > button {
width:100px;
height:30px;
border:1px solid silver;
background: transparent;
outline: none;}</style>
JavaScript分页算法
// An highlighted block<script>
window.onload=function(){var menu = document.getElementsByClassName("menu")[0];var nowpage =1;var totlepage =20;
menu.innerHTML =showmenu(nowpage, totlepage);var downpage = document.getElementById("downpage");var uppage = document.getElementById("uppage");
downpage.onclick=function(){
nowpage++;if(nowpage > totlepage){
nowpage = totlepage;}
menu.innerHTML =showmenu(nowpage, totlepage);}
uppage.onclick=function(){
nowpage--;if(nowpage <1){
nowpage =1;}
menu.innerHTML =showmenu(nowpage, totlepage);}}functionshowmenu(current, totlepage){var str ="";for(var i =1; i <= totlepage; i++){if(i ==2&& i < current -5){
i = current -3;
str +="<li>...</li>";}elseif(i == current +5&& current +5< totlepage){
i = totlepage -1;
str +="<li>...</li>";}else{if(i == current){
str +="<li style='background: #32bcff;color: #fff;'>"+ i +"</li>"}else{
str +="<li>"+ i +"</li>"}}}return str;}</script>