欢迎留言或者加本人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. ASP.net绑定文本框Enter事件到按钮 ASP.NET执行后台执行JS方法

    txtAccountBarcode.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if (( ...

  2. August 18th 2016 Week 34th Thursday

    Comedy is acting out optimism. 喜剧就是将乐观演绎出来. Being optimistic or pessimistic, that is all about your ...

  3. vs c++系统函数 计时器和暂停

    在vs console下, 1 添加计时器 #include <Windows.h> double start = GetTickCount(); double end = GetTick ...

  4. Qt5_简易画板_详细注释

    代码下载链接:  http://pan.baidu.com/s/1hsc41Ek 密码: 5hdg 显示效果如下: 代码附有详细注释(代码如下) /*** * 先新建QMainWindow, 项目名称 ...

  5. DB2 Z/os Load utility 使用

    Use the LOAD online utility to load one or more tables of a table space. The LOAD utility loads reco ...

  6. MVC – 7.Razor 语法

    7.1 Razor视图引擎语法 Razor通过理解标记的结构来实现代码和标记之间的顺畅切换. @核心转换字符,用来 标记-代码 的转换字符串. 语境A: @{ string rootName=&quo ...

  7. n的阶乘高精度算法【阶乘】

    C语言实验——求阶乘(循环结构) Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 题目链接:http://acm.sdut.edu ...

  8. android 入门-android Studio 解决方案

    一.当提示 解决方案: 1. 2. 二.从这步到这步 的时候,可能遇见下面的问题. 解决方案: 更新一下build-tools 19.1.0版本 放到你的sdk里并重启as. 三. 当遇见这样的情况 ...

  9. sublime text 2 安装emmet插件

    一.添加插件之前先 下载Package Control 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os;pf='Pack ...

  10. 第十九篇：提高SOUI应用程序渲染性能的三种武器

    SOUI是一套100%开源的基于DirectUI的客户端开发框架. 基于DirectUI设计的UI虽然UI呈现的效果可以很炫,但是相对于传统的win32应用程序中每个控件一个窗口句柄的形式,渲染效率是 ...