<!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="js_lib/jquery-1.12.4.min.js"></script>
<script>
var btn = $("button").get(0);
var box = $(".box").get(0);
var data = [1,2,3,4,5,6,7,8,9,10];
var howManyToLoad = 4;
var loadIndex = 0;
var newData = [];
btn.onclick = function(){
loadIndex++;
loadMore(loadIndex)
}
function loadMore(loadIndex){
if(loadIndex<Math.ceil(data.length/howManyToLoad)){
newData = 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>
时间： 2024-07-28 20:03:26