js之隔行换色

最新推荐文章于 2025-08-12 14:37:12 发布

转载最新推荐文章于 2025-08-12 14:37:12 发布 · 81 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bgwhite/p/9476781.html

文章标签：

#javascript #json #ViewUI

本文介绍了一个简单的网页加载更多功能的实现方法，通过HTML、CSS和JavaScript完成页面布局、样式及交互逻辑。文章展示了如何通过点击加载更多的按钮来动态加载新的列表项，并实现了列表项的鼠标悬停效果和删除功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

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();
    }
}

//各行变色
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);
            })
        }
    })
}

转载于:https://www.cnblogs.com/bgwhite/p/9476781.html