效果图如下：

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. bzoj 3598 [Scoi2014]方伯伯的商场之旅——数位dp

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3598 TJ:https://www.cnblogs.com/Zinn/p/9351218.h ...

  2. 超线程（Hyper-Threading）

    运行方式 每个单位时间内,一个CPU只能处理一个线程(操作系统:thread),以这样的单位进行,如果想要在一单位时间内处理超过一个线程是不可能的,除非是有两个CPU的实体单元.双核心技术是将两个一样 ...

  3. 洛谷 P1016 旅行家的预算 模拟+贪心

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 总结 题面 题目链接 P1016 旅行家的预算 题目描述 一个旅行家想驾驶汽车 ...

  4. golang之数据结构

    4种:bool/int/uint/uintptr(其中bool类型的零值为false,其余类型的零值为0) 4种:float32/float64/complex64/complex126 (零值为0) ...

  5. JQuery--关系选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. IO流理解方式小结

    从业以来一直对IO不甚了解,每次看到都头疼不已,最近有时间小小的总结一下,下面以FileIO流为]; //文件输入流 FileInputStream in = new FileInputStream( ...

  7. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十章：阴影贴图

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第二十章:阴影贴图 本章介绍一种在游戏和应用中,模拟动态阴影的基本阴影 ...

  8. day39-Spring 17-Spring的JDBC模板：完成增删改的操作

    JdbcTemplate根DBUtils非常类似,你要是有非常多的Dao,你每一个Dao都需要写它 /*在Dao层注入JDBC模板*/ private JdbcTemplate jdbcTemplat ...

  9. 让超出div内容的显示滚动条：overflow:auto，以及overflow其它属性

    css的属性,以前没用过遇到了,记录一下: 虽然layui本来自带这个处理,但是为了灵活,抛弃layui原有的加载,只是用layui的样样式,就要使用到这个css属性 总结overflow属性: /* ...

  10. Python学习之路13☞常用模块

    一 time模块 在Python中,通常有这几种方式来表示时间: 时间戳(timestamp):通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.我们运行“type(t ...