本文通过具体的HTML代码示例，展示了如何使用JavaScript来动态控制网页中元素的显示与隐藏，特别关注于超过特定数量的元素如何被自动隐藏，为网页设计提供了实用的技巧。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>乐网</title>
</head>
<body>
<p id="demo1">1</p>
<p id="demo2">2</p>
<p id="demo3">3</p>
<p id="demo4">4</p>
<p id="demo5">5</p>
<p id="demo6">6</p>
<p id="demo7">7</p>
<p id="demo8">8</p>
<script>
for (var i=1;i<9;i++){
if(i>5){document.getElementById("demo"+i).style.display="none";}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>乐网</title>
</head>
<body>
<div id="demo1">01题：
<input type="text" name="d1t" value=""/>
</div>
<div id="demo2">02题：
<input type="text" name="d2t" value=""/>
</div>
<div id="demo3">03题：
<input type="text" name="d3t" value=""/>
</div>
<div id="demo4">04题：
<input type="text" name="d4t" value=""/>
</div>
<div id="demo5">05题：
<input type="text" name="d5t" value=""/>
</div>
<div id="demo6">06题：
<input type="text" name="d6t"value="" />
</div>
<div id="demo7" >07题：
<input type="text" name="d7t" value=""/>
</div>
<div id="demo8" >08题：
<input type="text" name="d8t" value=""/>
</div>
<div id="demo9" >09题：
<input type="text" name="d9t" value=""/>
</div>
<div id="demo10">10题：
<input type="text" name="d10t" value=""/>
</div>
<div id="demo11" >11题：
<input type="text" name="d11t" value=""/>
</div>
<div id="demo12">12题：
<input type="text" name="d12t"value="" />
</div>
<div id="demo13">13题：
<input type="text" name="d13t" value=""/>
</div>
<div id="demo14">14题：
<input type="text" name="d14t" value=""/>
</div id="demo1">
<div id="demo15">15题：
<input type="text" name="d15t" value=""/>
</div>
<div id="demo16" >16题：
<input type="text" name="d16t" value=""/>
</div>
<div id="demo17">17题：
<input type="text" name="d17t" value=""/>
</div>
<div id="demo18">18题：
<input type="text" name="d18t" value=""/>
</div>
<div id="demo19">19题：
<input type="text" name="d19t" value=""/>
</div>
<div id="demo20">20题：
<input type="text" name="d20t" value=""/>
</div>
<div id="demo21">21题：
<input type="text" name="d21t"value="" />
</div>
<div id="demo22">22题：
<input type="text" name="d22t" value=""/>
</div>
<div id="demo23" >23题：
<input type="text" name="d23t" value=""/>
</div>
<div id="demo24">24题：
<input type="text" name="d24t" value=""/>
</div>
<div id="demo25">25题：
<input type="text" name="d25t" value=""/>
</div>
<div id="demo26">26题：
<input type="text" name="d26t" value=""/>
</div>
<div id="demo27">27题：
<input type="text" name="d27t"value="" />
</div>
<div id="demo28">28题：
<input type="text" name="d28t" value=""/>
</div>
<div id="demo29">29题：
<input type="text" name="d29t" value=""/>
</div>
<div id="demo30">30题：
<input type="text" name="d30t" value=""/>
</div>
<script>
for (var i=1;i<31;i++){
if(i>21){document.getElementById("demo"+i).style.display="none";}
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
