效果图如下：

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. 在虚拟机Ubuntu14.04中设置静态ip后无法上网的问题的解决

    背景:用着实验室代理服务器上网. 原因:网关和DNS没有设置正确 网关和DNS参照 真机cmd在命令窗口使用ipconfig  /all命令查看   虚拟机: sudo gedit /etc/netw ...

  2. Django项目：CRM(客户关系管理系统)--03--02PerfectCRM创建ADMIN页面01

    八．CRM项目创建king_admin python.exe manage.py startapp king_admin 'king_admin', 九．CRM项目分发URL "" ...

  3. Codeforces 455C

    题目链接 C. Civilization time limit per test 1 second memory limit per test 256 megabytes input standard ...

  4. vi中如何跳转到指定行数

    输入:n,代表跳转到第n行,如:100,就跳转到第100行.

  5. js 常用事件总结

    无论web端还是手机端,用户的交互总伴随着事件监听 下面是我总结的一些常用到的事件 1.监听标签内容变化 非input元素 $(dom).bind('DOMNodeInserted',function ...

  6. c++中的c_str()函数

    //c_str()是为了与C语言兼容,把c++中string类型的字符串返回首地址使用 #include <iostream>#include <string.h>using ...

  7. 一.数据结构&算法的引言+时间复杂度

    目录(contents): 1.什么是计算机科学?什么是算法? 2.如何形象化的理解算法? 3.什么是算法分析? 4.时间复杂度 5.数据结构 6.总结算法和数据结构之间的关联 一.什么是计算机科学? ...

  8. js获取url制定的某个参数

    <script>function getURLParam(strParamName, url) {    var strReturn = "";    var strH ...

  9. 【JZOJ1922】【Usaco 2005 NOV Gold】小行星群

    题目描述 Bessie想驾驶她的飞船穿过危险的小行星群,小行星群是一个N×N的网格(1 <= N <= 500),在网格内有K个小行星(1 <= K <= 10,000). 幸 ...

  10. iOS开发周报-- 第一期

    从Java转iOS第一个项目总结 http://www.cocoachina.com/ios/20150417/11595.html icon设计探讨:图标,文字,还是图标加文字? http://ww ...