mg4377娱乐娱城官网_mg4377娱乐手机版_www.mg4377.com

当前位置: mg4377娱乐娱城官网 > www.mg4377.com > 正文

js追加因素,JavaScript实现要素滚动条达到一定地

时间:2019-06-02 19:57来源:www.mg4377.com
js追加因素,JavaScript实现要素滚动条达到一定地方循环追加内容。如下所示: 1 !DOCTYPE html 2 html lang="en" 3 head 4 meta charset="UTF-8" 5 titleDocument/title 6 style type="text/css" 7 body{ 8 background-color:

js追加因素,JavaScript实现要素滚动条达到一定地方循环追加内容。如下所示:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 body{
 8 background-color: #eee;
 9 }
10 #contents{
11 margin:30px auto;
12 width: 960px;
13 height:300px;
14 overflow:auto; 
15 }
16 #list{
17 margin: 0;
18 padding: 0;
19 }
20 #list li{
21 color:#666;
22 list-style-type: none;
23 background-color: #ddd;
24 margin: 0;
25 margin-top:10px;
26 border-bottom: solid 1px #999;
27 text-align: center;
28 height:30px;
29 }
30 </style>
31 <script type="text/javascript">
32 //获取列表中的原有内容
33 window.onload=function(){
34 
35 var contents=document.getElementById("list").innerHTML;
36 //每被调用一次,就将网页原有内容添加一份,这个大家可以写自己要加载的内容或指令
37 function appendcontent(){
38 document.getElementById("list").innerHTML =contents;
39 }
40 document.getElementById("contents").onscroll=function(){
41 //content实际高度,
42 var contentscrollHeight=document.getElementById("contents").scrollHeight;
43 //contentclientHeight可视区高度,
44 var contentclientHeight=document.getElementById("contents").offsetHeight;
45 //滚动条距顶部高度
46 var contentscrollTop=document.getElementById("contents").scrollTop;
47 //通过判断滚动条的距离底部位置判断手否加载内容
48 var height=contentclientHeight 100;
49 if(contentscrollTop height>=contentscrollHeight){
50 if(document.getElementById("list").childNodes.length>=150){
51 if(document.getElementById("nodata")){
52 
53 }else{
54 var nodata=document.createElement("div");
55 nodata.id="nodata";
56 nodata.style.height="50px";
57 nodata.style.textAlign="center";
58 nodata.style.lineHeight="50px";
59 nodata.style.borderTop="1px solid #eee";
60 nodata.innerHTML="我是有底线的";
61 nodata.style.backgroundColor="#fff";
62 document.getElementById("list").appendChild(nodata);
63 }
64 console.log(document.getElementById("list").childNodes.length)
65 return;
66 }else{
67 appendcontent(); 
68 }
69 
70 }
71 };
72 
73 }
74 </script>
75 </head>
76 <body>
77 <div id="contents">
78 <ul id="list">
79 <li>张朋1</li>
80 <li>张朋2</li>
81 <li>张朋3</li>
82 <li>张朋4</li>
83 <li>张朋5</li>
84 <li>张朋6</li>
85 <li>张朋7</li>
86 <li>张朋8</li>
87 <li>张朋9</li>
88 <li>张朋10</li>
89 </ul>
90 </div>
91 </body>
92 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <style type="text/css">
 7 body{
 8 background-color: #eee;
 9 }
10 #contents{
11 margin:30px auto;
12 width: 960px;
13 height:300px;
14 overflow:auto; 
15 }
16 #list{
17 margin: 0;
18 padding: 0;
19 }
20 #list li{
21 color:#666;
22 list-style-type: none;
23 background-color: #ddd;
24 margin: 0;
25 margin-top:10px;
26 border-bottom: solid 1px #999;
27 text-align: center;
28 height:30px;
29 }
30 </style>
31 <script type="text/javascript">
32 //获取列表中的原有内容
33 window.onload=function(){
34 
35 var contents=document.getElementById("list").innerHTML;
36 //每被调用一次,就将网页原有内容添加一份,这个大家可以写自己要加载的内容或指令
37 function appendcontent(){
38 document.getElementById("list").innerHTML =contents;
39 }
40 document.getElementById("contents").onscroll=function(){
41 //content实际高度,
42 var contentscrollHeight=document.getElementById("contents").scrollHeight;
43 //contentclientHeight可视区高度,
44 var contentclientHeight=document.getElementById("contents").offsetHeight;
45 //滚动条距顶部高度
46 var contentscrollTop=document.getElementById("contents").scrollTop;
47 //通过判断滚动条的距离底部位置判断手否加载内容
48 var height=contentclientHeight 100;
49 if(contentscrollTop height>=contentscrollHeight){
50 if(document.getElementById("list").childNodes.length>=150){
51 if(document.getElementById("nodata")){
52 
53 }else{
54 var nodata=document.createElement("div");
55 nodata.id="nodata";
56 nodata.style.height="50px";
57 nodata.style.textAlign="center";
58 nodata.style.lineHeight="50px";
59 nodata.style.borderTop="1px solid #eee";
60 nodata.innerHTML="我是有底线的";
61 nodata.style.backgroundColor="#fff";
62 document.getElementById("list").appendChild(nodata);
63 }
64 console.log(document.getElementById("list").childNodes.length)
65 return;
66 }else{
67 appendcontent(); 
68 }
69 
70 }
71 };
72 
73 }
74 </script>
75 </head>
76 <body>
77 <div id="contents">
78 <ul id="list">
79 <li>张朋1</li>
80 <li>张朋2</li>
81 <li>张朋3</li>
82 <li>张朋4</li>
83 <li>张朋5</li>
84 <li>张朋6</li>
85 <li>张朋7</li>
86 <li>张朋8</li>
87 <li>张朋9</li>
88 <li>张朋10</li>
89 </ul>
90 </div>
91 </body>
92 </html>

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: #eee;
}
#contents{
margin:30px auto;
width: 960px;
height:300px;
overflow:auto; 
}
#list{
margin: 0;
padding: 0;
}
#list li{
color:#666;
list-style-type: none;
background-color: #ddd;
margin: 0;
margin-top:10px;
border-bottom: solid 1px #999;
text-align: center;
height:30px;
}
</style>
<script type="text/javascript">
//获取列表中的原有内容
window.onload=function(){
var contents=document.getElementById("list").innerHTML;
//每被调用一次,就将网页原有内容添加一份,这个大家可以写自己要加载的内容或指令
function appendcontent(){
document.getElementById("list").innerHTML =contents;
}
document.getElementById("contents").onscroll=function(){
//content实际高度,
var contentscrollHeight=document.getElementById("contents").scrollHeight;
//contentclientHeight可视区高度,
var contentclientHeight=document.getElementById("contents").offsetHeight;
//滚动条距顶部高度
var contentscrollTop=document.getElementById("contents").scrollTop;
//通过判断滚动条的距离底部位置判断手否加载内容
var height=contentclientHeight 100;
if(contentscrollTop height>=contentscrollHeight){
if(document.getElementById("list").childNodes.length>=150){
if(document.getElementById("nodata")){
}else{
var nodata=document.createElement("div");
nodata.id="nodata";
nodata.style.height="50px";
nodata.style.textAlign="center";
nodata.style.lineHeight="50px";
nodata.style.borderTop="1px solid #eee";
nodata.innerHTML="我是有底线的";
nodata.style.backgroundColor="#fff";
document.getElementById("list").appendChild(nodata);
}
console.log(document.getElementById("list").childNodes.length)
return;
}else{
appendcontent(); 
}
}
};
}
</script>
</head>
<body>
<div id="contents">
<ul id="list">
<li>张朋1</li>
<li>张朋2</li>
<li>张朋3</li>
<li>张朋4</li>
<li>张朋5</li>
<li>张朋6</li>
<li>张朋7</li>
<li>张朋8</li>
<li>张朋9</li>
<li>张朋10</li>
</ul>
</div>
</body>
</html>

 

 

 

上述那篇JavaScript实现要素滚动条到达一定地点循环追加内容正是作者分享给大家的全体内容了,希望能给大家三个参照他事他说加以考查,也意在我们多多帮忙脚本之家。

function setShow(val_param,text){
    var ul = document.getElementById("copyhere");

    //<li><input name="ytname_cp" type="checkbox" value="bhsc"/> 百货商场</li>//我想要追加的代码效果
    var li         = document.createElement("li");
    var input     = document.createElement("input");
      input.setAttribute("type", "checkbox"); 
      input.setAttribute("name", "ytname_cp");
      input.setAttribute("value", "val_param");
  
   li.insertAdjacentHTML("beforeend", text);
    li.insertAdjacentHTML("afterbegin", '<input name="Fruit" type="checkbox" >');
    //li.appendChild(input); //这句话能追加元素,但不能调整位置

    ul.appendChild(li); 

}
</script>

编辑:www.mg4377.com 本文来源:js追加因素,JavaScript实现要素滚动条达到一定地

关键词: Web前端 JavaScript Html、Javascr