效果图如下：

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. MySQL逻辑备份利器-mydumper

    关于mydumper的简介和下载请访问:https://launchpad.net/mydumper 简言之,mydumper是多线程逻辑备份,对于表和数据量很大的情况下,建议使用mydumper提高 ...

  2. 深入探讨 CSS 特性检测 @supports 与 Modernizr

    什么是 CSS 特性检测?我们知道,前端技术日新月异的今天,各种新技术新属性层出不穷.在 CSS 层面亦不例外. 一些新属性能极大提升用户体验以及减少工程师的工作量,并且在当下的前端氛围下: 很多实验 ...

  3. SUN SERVER X3-2 服务器数据写入缓慢

    使用一台sun server x3-2,SAS 300G 2.5寸硬盘两块:8G内存条*2,CPU E5-2609V3 安装一套服务器系统时感觉安装进度很慢,但一直找不到原因,因为要重做系统,同事练手 ...

  4. Hibernate执行流程和关系映射

    一.Hibernate的执行流程 hibernate作为一个ORM框架,它封装了大量数据库底层的sql语句操作的方法,这样在执行hibernate的过程中理解hibernate的执行流程很有必要. 由 ...

  5. 每天一个Linux命令 9

    Linux常用命令: 压缩命令:gzip 解压命令:gunzip 压缩命令:zip  解压命令:unzip 压缩命令:bzip2  解压命令:bunzip2 压缩打包命令:tar 1.命令名称:gzi ...

  6. SEO-发信息注意的问题

    SEO是什么? SEO的全称是Search Engine Optimization,翻译过来就是搜索引擎优化,说到搜索引擎,可能不是特别的清楚.通俗点讲,就是百度,谷歌,雅虎,这些可以直接搜索到你想要 ...

  7. 百度api使用心得体会

    最近项目中在使用百度地图api,对于其中的一些有用的点做一些归纳整理,如有不对的地方,欢迎各位大神纠正指出. 一定要学会查找百度地图api提供的类参考网站:http://lbsyun.baidu.co ...

  8. LKNotification控件-通知控件

    通知控件 项目介绍: 一个通知控件,长得很像iOS系统的通知栏弹出时候的样式.可以多个通知覆盖.引入项目之后,只需调用一行代码即可 [Java] 查看源文件 复制代码 ? 1 LKNotificati ...

  9. freemodbus移植讲解 ZZ

    一   为什么要移植Freemodbus 为什么要移植Freemodbus,这个问题需要从两个方面来回答.第一,modbus是一个非常好的应用层协议,它很简洁也相对完善.对于还没有接触过modbus的 ...

  10. HTML标签自定义属性

    本文章转载至:http://www.cnblogs.com/luoyanli/archive/2012/10/17/2727886.html HTML标签可以自定义属性,但是我们要考虑其在IE.Fir ...