HTML
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>加载更多</title>

<style type="text/css">

    .list li{

        padding: 10px;

        line-height: 15px;

    }

    .list a{

        float: right;

    }

    .loadMore{

        text-align: center;

        line-height: 50px;

        background: #ccc;

    }

    .loadMore:hover{

        background: #f99;

        color: #9ff;

        font-size: 18px;

        font-weight: 900;

        cursor: pointer;

    }

</style>

</head>

<body>

    <ul class="list">

        <li>这是第1个新闻<a href="javascript:;">×</a></li>

        <li>这是第2个新闻<a href="javascript:;">×</a></li>

        <li>这是第3个新闻<a href="javascript:;">×</a></li>

        <li>这是第4个新闻<a href="javascript:;">×</a></li>

        <li>这是第5个新闻<a href="javascript:;">×</a></li>

        <li>这是第6个新闻<a href="javascript:;">×</a></li>

        <li>这是第7个新闻<a href="javascript:;">×</a></li>

        <li>这是第8个新闻<a href="javascript:;">×</a></li>

        <li>这是第9个新闻<a href="javascript:;">×</a></li>

        <li>这是第10个新闻<a href="javascript:;">×</a></li>

        <li>这是第11个新闻<a href="javascript:;">×</a></li>

        <li>这是第12个新闻<a href="javascript:;">×</a></li>

        <li>这是第13个新闻<a href="javascript:;">×</a></li>

        <li>这是第14个新闻<a href="javascript:;">×</a></li>

        <li>这是第15个新闻<a href="javascript:;">×</a></li>

        <li>这是第16个新闻<a href="javascript:;">×</a></li>

        <li>这是第17个新闻<a href="javascript:;">×</a></li>

        <li>这是第18个新闻<a href="javascript:;">×</a></li>

        <li>这是第19个新闻<a href="javascript:;">×</a></li>

    </ul>

    <div class="loadMore">加载更多</div>

    <script src="js/common.js"></script>

    <script src="js/index.js"></script>

</body>

</html>

　　

 
JS
Common
//通过类名获取元素样式

function byClassName(sClassName){

    if(document.getElementsBYClassName){

        return document.getElementsByClassName(sClassName);

    } else {

        var allTagsName = document.getElementsByTagName('*');

        var result = [];

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

            if(allTagsName[i].className === sClassName){

                result.push(allTagsName[i]);

            }

        }

        return result;

    }

}

//通过Id获取元素样式

function $(id){

    return document.getElementById(id);

}

//获取元素的实际样式

function getStyle(obj,attr){

    if(obj.currentStyle){

        return obj.currentStyle[attr];

    } else {

        return document.getComputedStyle(obj,false)[attr];

    }

}

//多属性缓冲运动

function bufferMove(obj,target,fn,ratio){

    var ratio = ratio || 8;

    clearInterval(obj.timer);

    obj.timer = setInterval(function(){

        var allOk = true;

        for(var attr in target){

            var cur = 0;

            if(attr === 'opacity'){

                cur = parseInt(getStyle(obj,'opacity') * 100);

            } else {

                cur = parseInt(getStyle(obj,attr));

            }

            var speed =(target[attr] - cur) / ratio;

            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            var next = speed + cur;

            if(attr === 'opacity'){

                obj.style.opacity = next + 'px';

                obj.style.opacity = 'alpha(opacity= ' + next + ') ';

            } else {

                obj.style[attr] = next + 'px';

            }

            if(next !== target[attr]){

                allOk = false;

            }

        }

        if(allOk){

            clearInterval(obj.timer);

            if(fn){

                fn();

            }

        }

    },50)

}

//添加事件兼容,绑定多个事件

function bindEvent(obj,type,fn){

    if(obj.addEventListener){

        obj.addEventListener(type,fn);

    } else {

        obj.attachEvent('on' + type,fn);

    }

}

function ajax({type,data,url,async,beforeSend,success,complete}){

    var async = async || true;

//    创建对象

    var xhr = new XMLHttpRequest();

//    字符串的拼接

        if(typeof data === 'object'){

            var str = '';

            for(var attr in data){

                str += encodeURIComponent(attr) + '=' + encodeURIComponent(data[attr]) + '&';

            }

            data = str.slice(0,-1);

        }

    if(type.toUpperCase() === 'GET' && data){

        url += '?' + data;

    }

//    配置

    xhr.open(type,url,async);

//    接收数据

    xhr.onreadystatechange = function(){

        if(xhr.readyState === 4){

            if(xhr.status === 200){

                success && success(xhr.responseText);

            }

            complete && complete();

        }

    };

//    发送

    beforeSend && beforeSend();

    if(type.toUpperCase() === 'POST'){

        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        xhr.send(data);

    } else {

        xhr.send();

    }

}
 
JS
//各行变色

var oList = byClassName('list')[0];

var oLoadMore = byClassName('loadMore')[0];

var oLi = oList.children;

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

    if(i % 2 === 0){

        oLi[i].style.backgroundColor = '#ccc';

    }

    oLi[i].index = i;

    oLi[i].onmouseover = function(){

        this.style.backgroundColor = '#9ff';

    }

    oLi[i].onmouseout = function(){

        if(this.index % 2 === 0){

            this.style.backgroundColor = '#ccc';

        } else {

            this.style.backgroundColor = '#fff';

        }

    }

}

//添加删除功能

oList.onclick = function(ev){

    var e = ev || window.event;

    var o = e.target || e.srcElement;

    if(o.nodeName === 'A'){

        oList.removeChild(o.parentNode);

    }

}

//加载更多点击事件

oLoadMore.onclick = function(){

    ajax({

        type: 'post',

        url:  'news.php',

        success: function(data){

            data = JSON.parse(data);

console.log(data);

            data.forEach(v => {

                var oNewLi = document.createElement('li');

                oNewLi.innerHTML = '<a href="javascript">×</a>' + v;

                oList.appendChild(oNewLi);

            })

        }

    })

}

　　

 
 

js之隔行换色的更多相关文章

  1. js表格隔行换色和hover效果

    <!--js效果--> <script src="js/jquery.min.js" language="javascript">< ...

  2. css和js处理隔行换色的问题

      <html> <head> <meta charset="utf-8"> <meta name="" conten ...

  3. 原生js实现音乐列表（隔行换色、全选）

    一.实现原理: 1.使用 % 运算符实现各行换色,规律:当%前面的值和后面的值相同时  结果为0: 2.使用开关思想,实现在同一个元素上反复点击时的条件判断,并且把开关以属性方式绑定在每个元素上: 3 ...

  4. JS给TR隔行换色，鼠标经过有动感

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  5. 利用JS动态生成隔行换色HTML表格

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...

  6. js课程 4-11 表格如何实现隔行换色

    js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...

  7. JS实现自定义工具类，隔行换色、复选框全选、隔行高亮等

    很多功能都可以放在js的工具类中,在使用的时候直接调用 本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中  1.隔行换色 2.复选框的全选效果 3.实现表格 ...

  8. JS应用实例4：表格隔行换色

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  9. js实现表单的隔行换色、鼠标高亮出来等相关内容以及相关事件的作用

    主要是使用的onload().onmouseover和onmouseout的相关应用,满足此次的相关操作. 具体的相关的两个代码如下: <!DOCTYPE html> <html&g ...

随机推荐

  1. Servlet3.0与Spring

    servlet   filter  listener  web.xml DispatcherServlet  web.xml 后期 servlet3.0我们去除web.xml 通过注解方式 同时需要s ...

  2. MySQL INSERT语句

    insert的语法 INSERT [LOW_PRIORITY | DELAYED | HIGH_PRIORITY] [IGNORE] [INTO] tbl_name [(col_name,...)] ...

  3. JS 如何获取当前上一个月、下一个月和月份所含天数

    在数据报表查询中,经常需要设置查询的日期区间,如查询2018-02-01至2018-02-28的整月数据,这时需要提供快捷整月查询按钮: 如: 一般日期年月日之间由"-"或者&qu ...

  4. 【尺度不变性】An Analysis of Scale Invariance in Object Detection – SNIP 论文解读

    前言 本来想按照惯例来一个overview的,结果看到1篇十分不错而且详细的介绍,因此copy过来,自己在前面大体总结一下论文,细节不做赘述,引用文章讲得很详细,另外这篇paper引用十分详细,如果做 ...

  5. nwafu - java实习 JDBC练习 - 学生信息系统界面

    学生信息系统界面的实现 - JDBC writer:pprp 登录界面的实现: 分为两个部分: 1.LoginFrame.java : 用windowbuilder进行快速搭建界面,构建好登录的界面, ...

  6. Python类变量，实例变量，类方法，实例方法，静态方法的分析

    Python作为动态语言,跟静态语言如c/c++有很大区别,其中的一个重要的特性就是Python的变量无需声明直接可用.同样,类的成员变量无需声明,直接可用.目的是为了动态语言跟灵活,在思路想到的时候 ...

  7. Apache的MaxClients设置

    本文将介绍Apache的MaxClients参数的重要性以及在GC发生时对系统整体性能的显著影响.通过几个例子,你将会更清晰的理解MaxClients值所引发的问题.最后会介绍如何依据系统的可用内存来 ...

  8. angularjs1 自定义图片查看器(可旋转、放大、缩小、拖拽)

    笔记: angularjs1 制作自定义图片查看器(可旋转.放大.缩小.拖拽) 2018-01-12 更新  可以在我的博客  查看我 已经封装好的 纯 js写的图片查看器插件    博客链接 懒得把 ...

  9. 百度编辑器（ueditor）@功能之获取坐标

    //获取百度编辑器的工具类 var domUtils = UE.dom.domUtils; //获取编辑器的坐标 var $ueditor_offset = $("#ueditor_0&qu ...

  10. Django框架数据库模型

    博主最近开始优化之前的API接口自动化框架,这次打算使用django框架来完成 # -*- coding: utf-8 -*- from __future__ import unicode_liter ...