效果图如下：

html:

        <body>
        <div>
            <table id="btnbox">
                <tbody>
                <tr><td>
                    <a href="#" class="btn">上一页</a>
                    <a href="#" index="1">1</a>
                    <a href="#" index="2">2</a>
                    <a href="#" index="3">3</a>
                    <a href="#" index="4">4</a>
                    <a href="#" index="5">5</a>
                    <a href="#" index="6">6</a>
                    <a href="#" index="7">7</a>
                    <a href="#" index="8">8</a>
                    <a href="#" class="btn">下一页</a>
                </td></tr>
                </tbody>
            </table>
        </div>
    </body>

CSS:

        <style>
            a{                                                  /* a标签样式 */
                width:17px;
                height:20px;
                display: inline-block;
                text-align: center;
                text-decoration:none;
                border: 1px #000000 solid;
                font:12px/20px "宋体";
            }
            .btn{                                              /* 上一页下一页的宽 */
                width:60px;
            }
            #btnbox .on{color:#ffffff;background:blue;}      /* 预先设置好被点击的分页按钮的被点击状态 ，通过修改a标签的classname进行动态修改当前选中状态 */
            a:hover{                                         /* hover 使鼠标移上去显示背景颜色及边框 */
                color:#ffffff;
                background:blue;
            }
            table{                                          /* 在div中居中显示 */
                margin: 0 auto;
            }
        </style>

JS：

<script type="text/javascript" language="javascript">
window.onload = function(){var btnlist = document.getElementById('btnbox').getElementsByTagName('a');         //获取table下的所有a标签   注意这里的返回值是一个伪数组，并不支持对数组进行splice等操作，相关伪数组资料自行了解。
var index;                                                 //定义一个记录当前选中按钮的变量
for(var i=0;i<btnlist.length;i++){                         //使用for循环对1-8按钮进行点击事件绑定
    if(i!=0 && i<btnlist.length-1){                        //因为上一页下一页也在数组btnlist里面，所以需要排除
        btnlist[i].onclick = function(){
            clearbtn();
            this.className = 'on';                           //当鼠标点击该按钮时给按钮设置选中样式
index = parseInt(this.getAttribute('index'));               //取出当前按钮即a标签的自定义index值  使用 getAttrinbute 方法 需要转换成整数进行计算
        }
    }
}
btnlist[0].onclick = function(){                           //为上一页绑定点击事件
    if(index != 0){goto('-');}
}
btnlist[btnlist.length-1].onclick = function(){             //为下一页绑定点击事件
    if(index != 0){goto('+');}
}
function goto(x){                                          //当点击上一页下一页时进行的前后判断操作
    console.log(x);
    if(x == '-' && index != 1){
    index = index - 1;
}
else if(x == '+' && index != 8){
    index = index + 1;
}
clearbtn();
btnlist[index].className = 'on';                            //设置当前选中按钮样式
}
function clearbtn(){                                        // 清除选中样式
    for(var i=1;i<(btnlist.length-1);i++){
        if(btnlist[i].className == 'on'){btnlist[i].className = '';break;}
            }
        }
        btnlist[1].onclick();
    }
</script>

纯JS写动态分页样式效果的更多相关文章

  1. 【原生JS】动态分页样式效果

    效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr>&l ...

  2. 使用纯js写的一个分页

    上图晒效果: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用lim ...

  3. 用vue.js的v-for，v-if，computed写一个分页样式

    在学Vue,总想写个分页,先写了一个样式. 主要看思路: 思路简单,得到总页数,判断总页数,循环. 先判断总页数是否需要分页,总页数==1页就不分了. 再判断总页数<11就不用--. 总页数&g ...

  4. php分页类代码带分页样式效果(转)

    php分页类代码,有漂亮的分页样式风格 时间:2016-03-16 09:16:03来源:网络 导读:不错的php分页类代码,将类文件与分页样式嵌入,实现php查询结果的精美分页,对研究php分页原理 ...

  5. js+vue、纯js 按条件分页

    听说大牛都从博客开始的... 人狠话不多,翠花上酸菜代码: 有注解基本上都看的懂!但是自己还是要注意以下几点,免得以后再浪费时间. #.vue 中监听事件 v-on:change=“vueChange ...

  6. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  7. 纯JS写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...

  8. 纯js写“运动”框架

    所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target ...

  9. 纯JS写出日历

    封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" va ...

随机推荐

  1. php的empty()和isset()用法

    共同点: 1.都可以判定一个变量是否为空: 2.都返回boolean类型,即true或false. 区别: 1.isset()用来检测变量是否设置,只能用于变量,因为传递任何其它参数都将造成解析错误. ...

  2. 隐马尔可夫模型（HMM）攻略

    隐马尔可夫模型 (Hidden Markov Model,HMM) 最初由 L. E. Baum 和其它一些学者发表在一系列的统计学论文中,随后在语言识别,自然语言处理以及生物信息等领域体现了很大的价 ...

  3. ThinkPhp知识大全（非常详细）

    php框架 一.真实项目开发步骤: 多人同时开发项目,协作开发项目.分工合理.效率有提高(代码风格不一样.分工不好) 测试阶段 上线运行 对项目进行维护.修改.升级(单个人维护项目,十分困难,代码风格 ...

  4. 走进 Redis 的世界

    NoSQL(Not Only SQL) 在现今已经应用非常普遍了,尤其是 Redis 和 MongoDB.我们现在来说说 Redis. 前世 Redis 是一个意大利人 Salvatore Sanfi ...

  5. python pytesser 的安装

      安装包: 需要安装的包主要有两个: PIL 和 pytesser . PIL模块的安装不多说 pytesser 模块的安装: 下载后得到 "pytesser_v0.0.1.zip&quo ...

  6. 超出父视图无法点击问题hitTest

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #c91b13 } p.p2 { margin: 0.0px 0. ...

  7. yaourt 之 Curl 错误

    最近执行 yaourt 更新时总是出现以下错误: curl error: Couldn't connect to server 无法进行更新.把配置中的下载工具更换了成 axel 等其它下载工具,还是 ...

  8. Windows定时计划执行Python

    先看下定时执行的py文件 #coding:gbk from selenium import webdriver import time,os driver = webdriver.PhantomJS( ...

  9. 使用spring webflow，在前台页面中如何显示后端返回的错误信息

    刚刚接触spring webflow,相关的资料并不是很多,并且大都是那种入门的 .xml文件的配置. 用到的CAS 最新的4.0版本用的就是web-flow流,前台页面使用的是表单提交.于是我就碰到 ...

  10. yii2.0使用之缓存

    1.片段缓存(针对于视图中的某部分进行缓存): <?php 设置有效时间 $time=15; 缓存依赖,存入文件.当文件内容发生改变是才会刷新新内容 $dependecy=[ 'class'=& ...