欢迎留言或者加本人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. MAC系统下，删除.svn文件

    MAC系统下,.svn文件是隐藏的. 如果项目是非export导出的,那么项目中会有很多的.svn文件. 如果项目的体积非常庞大,我们如何快速的批量删除.svn文件呢?下面是操作方法: 打开终端,cd ...

  2. IOS-Uikit框架介绍

    •UIKit可识别三种类型的输入事件: –触摸事件 –运动(加速计)事件 –远程控制事件 IKit框架将触击信息封装为一个UIEvent对象,并派发给恰当的视图(有关UIKit如何将事件递送给您的视图 ...

  3. Excel统计工作簿sheet个数

    按Alt+F11调出VBE后,在"视图"-“立即窗口”中输入: debug.print ThisWorkbook.Sheets.Count 回车后就可看到工作表数量.

  4. ASP.Net后台 实现先弹出对话框，再跳转到另一个网页的实现方法

    解决办法如下: Response.Write("<script>alert('想在对话框中显示的内容');window.navigate(‘要转到的页面的URL’)</sc ...

  5. 公共增删改查(MVC+三层架构)

    1.建立数据访问层:新建一个项目,选择类库,命名为XXXDAL,然后把新生成的类删除,重新建一个类BaseDal,代码如下: public class BaseDal<T> where T ...

  6. Eclipse内存不够解决办法

    Window -- Preference --MyEclipse -- Servers -- Tomcat -- Tomcat6.x(选择自己安装的版本) -- JDK 在Optional Java ...

  7. 数据结构和算法 – 4.字符串、 String 类和 StringBuilder 类

    4.1.String类的应用 class String类应用 { static void Main(string[] args) { string astring = "Now is The ...

  8. 无废话Android之smartimageview使用、android多线程下载、显式意图激活另外一个activity,检查网络是否可用定位到网络的位置、隐式意图激活另外一个activity、隐式意图的配置，自定义隐式意图、在不同activity之间数据传递（5）

    1.smartimageview使用 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&q ...

  9. 查看Linux分区格式

    第一种方法: 使用mount   [root@ol6-121-rac1 ~]# mount /dev/mapper/vg_ol6121rac1-lv_root on / type ext4 (rw) ...

  10. ImageSwitcher自定意效果+定时切换图片

    Activity实现 1 import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; ...