效果图如下：

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实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  3. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  4. 原生js动态添加style，添加样式

    原生js动态添加style,添加样式 第一种 var style="[assign-url='"+str+"']{display:initial}"; var ...

  5. 微信小程序 JS动态修改样式

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

  6. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  7. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  8. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  9. js动态创建样式: style 和 link

    js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...

随机推荐

  1. ubuntu安装django

    sudo apt-get install python-django -y#django操作mysql数据库时还需要安装python-mysqldb驱动,当然mysql安装是必须的前提 sudo ap ...

  2. 【python之路13】python的深浅拷贝

    深浅拷贝 一.数字和字符串 对于 数字 和 字符串 而言,赋值.浅拷贝和深拷贝无意义,因为其永远指向同一个内存地址. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 impor ...

  3. 转: CentOS上安装LAMP之第一步：Apache环境及安装过程报错解决方案（纯净系统环境）

    传送门:http://blog.csdn.net/zhangatle/article/details/77416996  小心坑!填完就懂怎么安装了 Note:要从零开始搭建,就不要嫌中间遇到各种问题 ...

  4. nginx反项代理的简单配置

    在ubuntu 16.04下安装nginx, apt-get install nginx就可以了. 然后安装了node, npm, 写了个简单的main.js,启动了一个http,并监听 8888 然 ...

  5. jQuery Scroll Path 滚插视图酷炫

    jQuery Scroll Path是一个jQuery的滚动路径插件,可以让你自定义滚动路径.该插件是使用canvas flavored的语法来绘制路径.可以通过鼠标滚轮上/下箭头键和空格键来查看路径 ...

  6. Leetcode706.Design HashMap设计哈希映射

    不使用任何内建的哈希表库设计一个哈希映射 具体地说,你的设计应该包含以下的功能 put(key, value):向哈希映射中插入(键,值)的数值对.如果键对应的值已经存在,更新这个值. get(key ...

  7. IO-01. 表格输出

    本题要求编写程序,按照规定格式输出表格. 输入格式: 本题目没有输入. 输出格式: 要求严格按照给出的格式输出下列表格: ------------------------------------Pro ...

  8. iOS 开发该选择Blocks还是Delegates

    http://www.cocoachina.com/ios/20150925/13525.html 前文:网络上找了很多关于delegation和block的使用场景,发现没有很满意的解释,后来无意中 ...

  9. Docker初步了解 2016-10-30 20:46 279人阅读 评论(31) 收藏

    什么是docker? Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器. Docker本质上是一种软件,让用户创建镜像(很像虚拟机的模板),并且随后在容器里 ...

  10. 2014年山东省第五届ACM大学生程序设计竞赛F题:Full Binary Tree

    题目描述 In computer science, a binary tree is a tree data structure in which each node has at most two ...