效果图如下：

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. 纪中集训 Day 8 & Last Day

    好吧回到家一直玩到现在才来写冏= = 然后今天终于在最后一场比赛中AK了= = 虽然有两人AK，另一个是初二牛ORZ 其实都是水题+模板题 第一题是DP，第二题是模拟，第三题是可持久化TREAP（其实 ...

  2. [Selenium With C#学习笔记] Lesson-02 Web元素定位

    使用Selenium来做自动化测试,一般的流程是:查找定位元素--->操作元素--->断言,那么第一步我们需要能够完成查找并定位元素,Selenium目前提供了8种基本定位方法,可根据实际 ...

  3. 使用秘钥连接ssh

    ssh服务器搭建 通过秘钥登陆连接另外一台虚拟机 创建证书  ssh-keygen -t rsa 第一行密钥保存位置直接输入回车 确定默认创建位置为 /root/.ssh 公钥必须改名为  autho ...

  4. 打造“黑客“手机--Kali Nethunter

    从三月份开始,继续更新技术文章.一个月没有更新技术文章了,这一个月有一部分时间是在休息,另一部分时间是在学习汇编和操作系统,沉淀底层和逆向方面的技术. 今年年初,为了玩一下 kali NetHunte ...

  5. dll

    dll可以有一个入口点函数,系统会在不同的时候调用这个入口函数.这个调用是通知性质的,通常被dll用来执行一些与进程或线程有关的初始化和清理工作如果将dll的入口点函数命名为DllMain之外的其他名 ...

  6. Spring总结_04_容器和bean

     一.概念理解 1.容器 IoC容器负责容纳并管理bean,在Spring中,BeanFactory是IoC容器的核心接口. 它的职责包括:实例化.定位.配置应用程序中的对象及建立这些对象间的依赖. ...

  7. (五)CSS和JavaScript基础

    DHTML :制作动态HTML页面的技术 DHTML=HTML+层叠样式表CSS+脚本语言javascript 一.CSS 1.1 CSS样式的分类: 行内样式:只影响一行,其他相同标签也不影响.如下 ...

  8. 1054: [HAOI2008]移动玩具

    1054: [HAOI2008]移动玩具 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1272  Solved: 690[Submit][Statu ...

  9. webots自学笔记（四）传感器API使用、查看官方文档

           原创文章,来自“博客园,_阿龙clliu” http://www.cnblogs.com/clliu/,转载请注明原文章出处.           不能说webots的学习资料少,只能说 ...

  10. SQL AlawaysOn 之一：安装域控制器

    一.准备阶段 1.  计算机名称命名 2.IP地址修改.DNS修改 IP地址和DNS不一定要和图上的一致,只要固定就行了 二.安装阶段 1.服务器管理器,仪表盘,点击“添加角色和功能” 2.添加角色和 ...