欢迎留言或者加本人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. Servlet题库

    一.    填空题 Servlet中使用Session对象的步骤为:调用  HttpServletRequest.getSession()  得到Session对象,查看Session对象,在会话中保 ...

  2. Cannot change version of project facet Dynamic Web Module to 3.0

    背景描述: 最近在开发项目时,老是报错说:Project is not Dynamic Web Module 3.0.右击项目选择属性进行修改时出现以下错误: 这让我很是恼火,后来终于找到了万能的解决 ...

  3. August 31st 2016 Week 36th Tuesday

    A friend without faults will never be found. 没有缺点的朋友是永远找不到的. You can't find a friends without faults ...

  4. spring集成activeMQ

    1.安装activehttp://activemq.apache.org/activemq-5140-release.html2.运行D:\apache-activemq-5.14.0\bin\win ...

  5. hdu 5108 Alexandra and Prime Numbers

    数论题,本质是求出n的最大质因子 #include<time.h> #include <cstdio> #include <iostream> #include&l ...

  6. .net学习笔记----WebConfig常用配置节点介绍

    一.配置文件入门 .Net提供了一种保存项目配置信息的办法,就是利用配置文件,配置文件的后缀一般是.config.在WinForm程序中配置文件一般是App.config.在Asp.net中一般默认是 ...

  7. ckplayer视频播放插件使用

    研究ckplayer插件播放视频,播放视频需要配置信息修改如下: 1.设置ckplayer.js中的logo: 'null' 可以隐藏视频播放头部的图标: 2.设置ckplayer.js中的ckcpt ...

  8. oracle sql rank dense_rank row_number fisrt last

    測試表emp

  9. go sample - mongodb

    简单的mongodb 操作 package mainimport ( "fmt" "gopkg.in/mgo.v2" "gopkg.in/mgo.v2 ...

  10. C#交互功能的演化

    (此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注.) 题记:Miguel de Icaza在最近发表的一篇博文中畅谈了Mono及其相关产品中的C#交互特性的演化情况. ...