效果图如下：

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. devexpress实现单元格合并以及依据条件合并单元格

    1.devexpress实现单元格合并非常的简单,只要设置属性[AllowCellMerge=True]就可以了,实现效果如下图: 2.但是在具体要求中并非需要所有的相同单元格都合并,可能需要其他的条 ...

  2. ios跳转到系统设置

    在项目中,我们经常会碰到使用位置的需求.当用户设置app不允许使用位置的时候,最好的用户体验就是直接调转到系统的位置设置界面,进行设置. 第一 跳转到自己项目(在需要调转的按钮动作中添加如下的代码,就 ...

  3. 学习笔记——Java包装类

    由于Java不能定义基本类型的对象,所以通过包装类提供了各种可用方法的封装. 这一部分的知识,需要能够通过查看Integer.Boolean.Byte.Character.Double.Number类 ...

  4. MobileOA第一期总结

    MobileOA第一期总结 前段时间一直没有更新博客,好想给自己找个借口---恩,我还是多找几个吧.毕业论文.毕业照,再感伤一下,出去玩一下,不知不觉就过去几个月了.然后上个月底才重新回到学习之路,从 ...

  5. sql server数据库备份压缩拷贝实例

    --数据库备份压缩拷贝实例:前提要安装RAR压缩软件--声明变量declare @day varchar(10),@dbname varchar(20),@filename varchar(100), ...

  6. i春秋与我

    在i春秋论坛混迹了大半年了,在i春秋的在线平台学到了很多奇技淫巧,特别喜欢这个平台的气氛,以及虚拟在线网络环境的搭建, 忙周偷乐,过来也为i春秋做点小奉献,共同构造我们喜欢的春秋平台,成长特别快,特别 ...

  7. Linux进程管理详解

    何谓进程?进程,就是正在执行的一个程序或命令,每一个进程都是一个运行实体,有自己的地址空间,并占用一定的系统资源.简而言之,进程就是运行中的程序.在Linux中,诸如ls等命令都是进程,只不过某些命令 ...

  8. synchronized和lock比对

    前言:在上面的博客说了synchronized的一些用法,下面我们再来看看lock,这个出现频率也是非常高的一个. 1:获取Lock锁的几种方式 前面说了synchronized有锁对象和锁类对象,当 ...

  9. asp.net core mvc剖析：mvc动作选择

    一个http请求过来后,首先经过路由规则的匹配,找到最符合条件的的IRouter,然后调用IRouter.RouteAsync来设置RouteContext.Handler,最后把请求交给RouteC ...

  10. spl之文件处理

    spl是php标准库的缩写 spl文件处理类库: SplFileInfo  //是一个类用以获取文件的各种信息SplFileInfo的所有方法如下 方法名            - ---   说明2 ...