老师，麻烦您帮我看一下代码？
来源：11-2 编程练习
郭永青
2020-05-22 00:02:00
<!DOCTYPE html>
<html>
<head>
<title>编程练习题</title>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
}
div:not(:nth-of-type(2)) {
width: 500px;
height: 100%;
background-color: #a0e4ff;
margin: 0 auto;
}
/*ul默认有外边距*/
ul {
width: 300px;
height: 100%;
background-color: #ecc7ea;
list-style: none;
/*清除默认边距*/
margin: 0;
padding: 0;
margin: 20px auto;
margin-bottom: 30px;
}
li {
width: 200px;
height: 30px;
line-height: 30px;
margin: 30px auto;
background-color: #cdffc0;
}
</style>
<script>
window.onload=function(){
var but1=document.getElementById("btnAdd");
var but2=document.getElementById("btnRemove");
var ul=document.getElementById("list");
var li=document.getElementsByTagName("li");
//遍历前三个li,为li添加鼠标滑过时和鼠标离开时事件，改变CSS样式
for(var i=0,len=li.length;i<len;i++){
//添加if语句，设置条件，i等于0或1或2时，添加鼠标移入事件
if(i==0||i==1||i==2){
//执行满足条件的语句
li[i].onmouseover=function(){
//鼠标滑过时
this.style.backgroundColor="#009fff";
};
//鼠标离开时
li[i].onmouseout=function(){
this.style.backgroundColor='#df8063';
};
};
};
//为增加和删减按钮添加鼠标点击事件；
but1.onclick=Add;
but2.onclick=move;
//在Add的鼠标点击事件中添加执行代码；
function Add(){
//创建li元素
var new_li=document.createElement("li");
//创建text文本内容,解释设置为空的原因？因为添加的文本随着li的变化而变化，所以先遍历li，在填充li的文本。
var text=null;
//遍历li
for(var i=0;i<=list.childElementCount;i++){//解释条件？因为不知道在ul下面会有多少个子节点li,所以先遍历它的个数好知道i的值。childElementCount获取除开空白节点的子节点个数
//为text添加填充内容
text=document.createTextNode("我是li"+(i+1));
};
//为li添加文本节点
new_li.appendChild(text);
//为ul添加新的li子节点
list.appendChild(new_li);
};
//在move的鼠标点击事件中添加执行代码；
function move(){
//removeChild删除子节点，设置条件，当点击删除，list的子节点个数只有一个的时候，立即退出返回，否则点击一次，就删除一次。建议运用if语句
if(list.childElementCount==1){
//条件解释：判断ul下面的非空白子节点个数等于0的时候，退出
return;
}else{
list.removeChild(list.lastElementChild);
};
};
}
</script>
</head>
<body>
<div id="box">
<button id="btnAdd">添加元素</button>
<button id="btnRemove">删除元素</button>
<ul id="list">我是ul
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
</ul>
</div>
</body>
</html>
问题一：老师，代码最终呈现的效果对吗？这样写应该是规范的吧？
问题二：老师，我几乎每写一行代码，就写一行注释，算是我自己对这行代码的理解。量有点多，您帮我看看我的这些个注释理解都对吗？还麻烦您了。
问题三：老师，就是在鼠标滑过离开li时，前三个的背景色发生变化，在写if语句条件时，我想直接写成
if(i<=2){},可是不知道为什么不行。因为我想着是已知的三个，所以就直接写条件，不行。为啥呀？
1回答
-
同学你好，关于同学的疑问，解答如下：
1、测试同学的代码，第一个li元素不能删除。正确的效果是可以删除的。
建议：把条件修改为==0
2、注释理解的是可以的。
3、修改为 if(i<=2){}可以实现效果，同学提到的不行指的是什么呢？可以把自己用 if(i<=2){}的代码粘贴上来。
祝学习愉快~
0
相似问题