欢迎留言或者加本人QQ172360937咨询

这段代码是用原生 js 写的一个分页的效果

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    *{padding:0;margin:0;}

        #ul{font-size:0;font-family:Microsoft YaHei;display:inline-block;}

        #ul li{

                -moz-user-select:none;/*火狐*/

                -webkit-user-select:none;/*webkit浏览器*/

                -ms-user-select:none;/*IE10*/

                -khtml-user-select:none;/*早期浏览器*/

                user-select:none;

                list-style: none;float:left;padding:6px;font-size:13px;border:1px solid #ccc;margin:2px;cursor:pointer;color:#585858;}

        #div{width:100%;text-align: center;position:absolute;bottom:30px;}

        #ul .background{background:#39C6F4;color:white;border:1px solid #39C6F4;}

    </style>

</head>

<body>

    <div id='div'>

        <ul id='ul'>

            <li>首页</li>

            <li>上一页</li>

            <li></li>

            <li></li>

            <li></li>

            <li>下一页</li>

            <li>尾页</li>

        </ul>

    </div>

    <script>

        var ul = document.getElementById('ul');

        var li = ul.getElementsByTagName('li');

        li[2].className = 'background';

        var num01 = 1;

        var num02 = 800/*总数*/;

//1 //首页的点击事件

            li[li.length-li.length].onclick = function(){

                Background(2);

                num01 = 1;

                content(num01);

            }

//2 //尾页的点击事件

            li[li.length-1].onclick = function(){

                Background(li.length-3);

                num01 = num02-(li.length-5);

                content(num01)

            }

//3 //上一页的点击事件

            li[li.length-(li.length-1)].onclick = function(){

                for(var j = 0;j<li.length-4;j++){

                    if(li[j+2].className == 'background' && li[j+2].innerHTML != 1){

                        if(j+2 != li.length-(li.length-2)){

                            Background(j+1);

                        }

                        break;

                    }

                }

                if(j+2 == li.length-(li.length-2)){

                    num01 -- ;

                    content(num01);

                }

            }

//4 下一页的点击事件

            li[li.length-2].onclick = function(){

                for(var j = 0;j<li.length;j++){

                    if(li[j].className == 'background' && li[j].innerHTML < num02){  //* && 写最后一页的总数*/

                        if(j+1 < li.length-2){

                            Background(j+1);

                        }

                        break;

                    }

                }

                if(j+1 == li.length-2){

                    num01++;

                    content(num01);

                }

            }

//     分页的点击事件

            for(var i = 0;i<li.length-4;i++){

                li[i+2].index = i+2;

                li[i+2].onclick = function(){

                    Background(this.index);

                }

            }

    //把所有的分页背景去掉，给指定的分页添加背景颜色

            function Background(num){

                for(var i = 0;i<li.length;i++){

                    li[i].className = li[i].className.replace('background','');

                    li[num].className = 'background';

                }

            }

    // 给li 写内容

        content(num01);

            function content(number){

                for(var i=0;i<li.length-4;i++){

                    li[i+2].innerHTML = number;

                    number++;

                }

            }

    </script>

</body>

</html>

原生 js 写分页的更多相关文章

  1. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  2. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  3. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  4. 用原生JS写移动动画案例及实际应用

    js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...

  5. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  6. 原生JS写的ajax函数

    参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax ...

  7. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  8. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

  9. 原生js显示分页效果

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

随机推荐

  1. SQL Server 2008 R2 安装出错：Could not open key

    安装Sql Server 2008 R2 企业版出现错误提示无法继续安装,错误提示为: Could not open key: UNKNOWN\Components\7ABFE44842C12B390 ...

  2. win7画板橡皮擦改变大小

    按住CTRL键不放,再按小键盘上的“+”号键,可以将橡皮擦放大

  3. 营业额统计（bzoj1588）

    Description 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每 ...

  4. WebKit示例解读

    如果你曾经在你的App中使用UIWebView加载网页内容的话,你应该体会到了它的诸多不尽人意之处.UIWebView是基于移动版的Safari的,所以它的性能表现十分有限.特别是在对几乎每个Web应 ...

  5. Linux下第一次使用MySQL数据库，设置密码

    在终端下输入:/etc/rc.d/init.d/mysqld status 查看MySQL状态,看看是否运行. 没有运行的话就输入:/etc/rc.d/init.d/mysqld start 这时,就 ...

  6. nc　显示服务器开放的端口

    # nc -z -w xxxx.com - Connection to xxxx.com port [tcp/ftp] succeeded! Connection to xxxx.com port [ ...

  7. 【PHP XML与dtd概述【完整版】】

    一.XML文件简介 关于XML的大多数人都知道一些,HTML->xhtml->xml,这个顺序本来应当是HTML发展的顺序. XML可以当做配置文件使用,还可以充当小型的数据库. vers ...

  8. POJ3294 Life Forms(后缀数组)

    引用罗穗骞论文中的话: 将n 个字符串连起来,中间用不相同的且没有出现在字符串中的字符隔开,求后缀数组.然后二分答案,用和例3 同样的方法将后缀分成若干组,判断每组的后缀是否出现在不小于k 个的原串中 ...

  9. POJ3694 Network(Tarjan双联通分图 LCA 桥)

    链接:http://poj.org/problem?id=3694 题意:给定一个有向连通图,每次增加一条边,求剩下的桥的数量. 思路: 给定一个无向连通图,添加一条u->v的边,求此边对图剩余 ...

  10. golang exec Command

    package mainimport ( "fmt" "log" "os/exec")func main() { out, err := e ...