欢迎留言或者加本人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. 电子现金、电子钱包、qPBOC、闪付、UPCash

    一.关于金融IC卡领域的规范 由Europay.Mastercard.Visa三大国际信用卡组织联合制定的金融集成电路(IC)卡金融支付标准,称为EMV规范,其目的是为金融IC卡.金融终端.支付系统以 ...

  2. ArrayList 和 LinkedList 的区别

    1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构.2.对于随机访问get和set,ArrayList优于LinkedList,因为LinkedList要移动 ...

  3. iOS - 常用的宏定义

    1.处理NSLog事件(开发者模式打印,发布者模式不打印) 1 2 3 4 5   #ifdef DEBUG   #define NSLog(FORMAT, ...) fprintf(stderr,& ...

  4. java的system.arraycopy（）方法

    java.lang.System的静态方法arraycopy()可以实现数组的复制,讲课的老师说这个方法效率比较高,如果数组有成千上万个元素,那么用这个方法,比用for语句循环快不少.于是我试了试,发 ...

  5. AngularJS 简介、指令、表达式

    AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...

  6. C/C++学习笔记---高地址、低地址、大段字节序、小段字节序

    字节顺序是指占内存多于一个字节类型的数据在内存中的存放顺序,通常有小端.大端两种字节顺序. 小端字节序指低字节数据存放在内存低地址处,高字节数据存放在内存高地址处: 大端字节序是高字节数据存放在低地址 ...

  7. php提示 Notice: Use of undefined constant name - assumed

    我们知道php在数组中写变量有二几种方法,我们出现这种提示就是你写成了[name]这种所以会有Notice: Use of undefined constant name - assumed name ...

  8. POJ3685 Matrix(嵌套二分)

    同行元素递减,同列元素递增,采用嵌套二分的方法 #include<cstdio> #include<iostream> #include<cstdlib> #inc ...

  9. WCF消息拦截，利用消息拦截做身份验证服务

    本文参考  http://blog.csdn.net/tcjiaan/article/details/8274493  博客而写 添加对信息处理的类 /// <summary> /// 消 ...

  10. hdu 4010 动态树 @

    kuangbin模板题,看起来十分高大上 /* *********************************************** Author :kuangbin Created Tim ...