首页 > 代码库 > 数据加载更多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代码
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。