效果图如下：

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远程连接权限

    环境:mysql6.0 .Navicat Premium 用户名:root 密码:123456  本地连接无问题 远程连接mysql的时候应该碰到Navicat Premium 报错. 错误代码是11 ...

  2. groovy regex groups(groovy正则表达式组)

    先看一个java正则表达式的例子. import java.util.regex.Matcher; import java.util.regex.Pattern; public class TestM ...

  3. 第一章 Java语言概述2

    一.编写第一个Java应用程序 1.下载.安装JDK 官方网址:www.oracle.com java.sun.com 安装JDK 傻瓜式安装,下一步即可. 建议:安装路径不要有中文或者特殊符号,如空 ...

  4. STM32按键控制程序

    由于最近时间比较匆忙 已经有很久的时间没有写博客了 这次和大家分享的是STM32的一个按键的小程序 他的优点呢也是和上面一个LED一样就是便于移植 更改管脚方便 虽然都是些小程序 但是我觉得他们就像基 ...

  5. 架构师之路——单一职责原则SRP (我单纯，我快乐)

    定义: 不要存在多于一个导致类变更的原因.通俗地讲,一个类只做一件事情.   单一职责原则的好处: 1.类的复杂性降低,实现什么职责都有清晰明确的定义: 2.可读性提高,复杂性降低,那当然可读性提高了 ...

  6. 在.NET Core 上运行的 WordPress

    在.NET Core 上运行的 WordPress,无需安装PHP既可跨平台运行WordPress. 在Peachpie中实现PHP所需的功能数月后,现在终于可以运行一个真实的应用程序:WordPre ...

  7. 《新手养成记》--第一篇 iOS手机号正则判断和获取验证码

    今天是开通一个新博客开启新的一年,同时也是对自己的过去做一个告别.介绍一下博主自己,资深iOS屌丝男,今天写这个博客就是刻意拉低逼格的,前两年写的博客为了装那什么,故意写的高大上,其实呵呵哒...年假 ...

  8. TypeScript设计模式之备忘录、命令

    看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 学模式最重要的不是记UML,而是知道什么模式可以解决什么样的问题,在做项目时碰到问题可以想到用哪个模式可以解决,UML忘了可以查,思想 ...

  9. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  10. Java基础——第一个记事本代码与Java注释

    一 .使用记事本编辑java文件: 1.打开记事本,重命名文件名,文件拓展名“.java”.(必须要的,系统才能识别java文件) 2.编写一个简单的java代码: public class Hell ...