<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#nav{
margin:10px 450px;
}
</style>
</head>
<body>
<div id="nav">
<span>输入要显示的彩灯数：</span>
<input type="text" id="text" />
<button type="button">生成</button>
<button type="button">清除</button>
</div>
<hr />
<div id="box">
</div>
<script>
var nav=document.getElementById("nav");
var box=document.getElementById("box");
var btn1=nav.children[2];
var btn2=nav.children[3];
console.log(btn1);
console.log(btn2);
//生成
btn1.onclick = function creat(){
var fag = document.createDocumentFragment();
var count = document.getElementById("text").value;
console.log(count);
for(var i=0; i<count;i++){
var li= document.createElement("img")
li.setAttribute("src","../img3/off.png");
li.setAttribute("width","200px");
fag.appendChild(li);
}
box.appendChild(fag);
setInterval(light,1000);
}
//发光
function light(){
var list = document.getElementsByTagName("img");
for(var i=0;i<list.length;i++){
if(Math.random()-0.5>0){
list[i].src = "../img3/on.png"
}else{
list[i].src = "../img3/off.png"
}
}
}
//清除
btn2.onclick = function clear(){
var list = document.getElementsByTagName("img");
console.log(list);
for(var i=list.length;i>0;i--){
/* box.removeChild(list[i]);*/
list[i].parentNode.removeChild(list[i]);
}
}
</script>
</body>
</html>
越界了
for(var i=list.length;i>0;i--){
改为下面的
for(var i=list.length-1;i>=0;i--){