首页 > 代码库 > 数据加载更多js代码

数据加载更多js代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <div>        <button value="查看更多">查看更多</button>    </div>    <div class="box"></div>    <div class="noMore" style="display: none;">我是有底线的。。。</div></body></html>
<script src="http://www.mamicode.com/js_lib/jquery-1.12.4.min.js"></script><script>    var btn = $("button").get(0);    var box = $(".box").get(0);    var data = http://www.mamicode.com/[1,2,3,4,5,6,7,8,9,10];    var howManyToLoad = 4;    var loadIndex = 0;    var newData =http://www.mamicode.com/ [];    btn.onclick = function(){        loadIndex++;        loadMore(loadIndex)    }    function loadMore(loadIndex){        if(loadIndex<Math.ceil(data.length/howManyToLoad)){            newData = http://www.mamicode.com/data.slice(loadIndex*howManyToLoad,(loadIndex+1)*howManyToLoad);            var dom = "";            for(var i=0; i<newData.length; i++){                dom += "<h4>"+newData[i]+"</h4>";            }            $(box).append(dom); // 实在忍不住用了jquery        }else{            $(".noMore").show();        }    }    loadMore(loadIndex);</script>

 

数据加载更多js代码