效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/bb6a63ea704d42f38c82b602463099cf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCPY2Plrrg=,size_20,color_FFFFFF,t_70,g_se,x_16)
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业2-排队</title>
<style type="text/css">
#b-box{
margin: 50px auto;
width: 500px;
text-align: center;
}
#folk{
margin-top: 38px;
text-align: right;
}
#folk span{
border: 1px solid #000;
float: right;
margin-left: 17px;
}
#clrDiv{
clear: both;
}
</style>
</head>
<body>
<div id="b-box">
<div>
<h2>排队领鸡蛋</h2>
<hr/>
</div>
<div id="folk">
<span>宸霸</span>
<span>榕哥哥</span>
<span>森弟</span>
</div>
<div id="clrDiv">
<br/><hr/>
</div>
<div>
<br/>
输入名字:
<input type="text" name="" id="name" value="" />
<input type="button" name="" id="queue" value="排队" onclick="queue1()"/>
<input type="button" name="" id="dequeue" value="出队" onclick="dequeue()"/>
</div>
</div>
<script type="text/javascript">
function queue1(){
var name = document.getElementById("name").value;
var newSpan = document.createElement("span");
var folkDom = document.getElementById("folk");
newSpan.style.border = "1px solid #000";
newSpan.style.float = "right";
newSpan.style.marginLeft = "17px";
newSpan.append(name);
folkDom.appendChild(newSpan);
}
function dequeue(){
var delDoms = document.querySelectorAll("#folk span");
delDoms[0].remove();
}
</script>
</body>
</html>
DOM练习2文件:
https://download.csdn.net/download/cc2855816075/81172756