浏览器:Google Chrome
编译器:Visual Studio Code
任务目的
- 模拟一个队列,队列的每个元素是一个数字,初始队列为空
- 有一个input输入框,以及4个操作按钮
1. 点击"左侧入",将input中输入的数字从左侧插入队列中;
2. 点击"右侧入",将input中输入的数字从右侧插入队列中;
3. 点击"左侧出",读取并删除队列左侧第一个元素,并弹窗显示元素中数值;
4. 点击"右侧出",读取并删除队列又侧第一个元素,并弹窗显示元素中数值; - 点击队列中任何一个元素,则该元素会被从队列中删除
先写html片段
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>进阶task1</title>
<link href="css/task1.css" rel="stylesheet">
</head>
<body>
<div id="container">
<input id="inputValue" type="number">
<button class="btn" id="left_in_btn">左侧入</button> <!--左右就相当于元素的前后-->
<button class="btn" id="right_in_btn">右侧入</button>
<button class="btn" id="left_out_btn">左侧出</button>
<button class="btn" id="right_out_btn">右侧出</button>
<p id="queue"></p>
</div>
<script type="text/javascript" src="js/task1.js"></script>
</body>
</html>
再写css片段
#container
{
margin: 20px;
}
.btn
{
border-radius:3px;
background-color:#fff;
width:80px;
margin-right:5px;
}
#right_in_btn
{
margin-right:40px;
}
#queue
{
margin-top:5px;
}
.box /*js创建元素所需要的类名*/
{
display:inline-block;
min-width:40px; /*防止数字长度太短导致不美观*/
height:40px;
background-color:#ff0000;
color:#fff;
font-size:20px;
text-align:center;
padding-top:10px;
margin-right:5px;
}
js
- 先写获取点击
function init()
{
var left_in_btn = document.getElementById("left_in_btn");
left_in_btn.onclick = leftIn;
var right_in_btn = document.getElementById("right_in_btn");
right_in_btn.onclick = rightIn;
var left_out_btn = document.getElementById("left_out_btn");
left_out_btn.onclick = leftOut;
var right_out_btn = document.getElementById("right_out_btn")
right_out_btn.onclick = rightOut;
var queue = document.getElementById("queue");
queue.onclick = function
{
queue.removeChild(event.target);
}
}
- 完善点击分别对应的函数
function leftIn()
{
var inputValue = document.getElementById("inputValue").value;
if(inputValue.length > 0)
{
var newNode = createNode(inputValue);
var queue = document.getElementById("queue");
queue.insertBefore(newNode,queue.firstChild);
}
}
function rightIn()
{
var inputValue = document.getElementById("inputValue").value; //获取输入的值
if(inputValue.length > 0 )
{
var newNode = createNode(inputValue); //调用createNode()
var queue = document.getElementById("queue");
queue.appendChild(newNode); //接到p上
}
}
function leftOut()
{
var queue = document.getElementById("queue");
if(queue.childNodes.length > 0)
{
queue.removeChild(queue.firstChild);
}
}
function rightOut()
{
var queue = document.getElementById("queue");
var len = document.getElementById("queue").childNodes.length;
if(len>0)
{
queue.removeChild(queue.lastChild);
}
}
function createNode(num)
{
var newItem = document.createElement("span");
var textNode = document.createTextNode(num);
newItem.appendChild(textNode);
newItem.setAttribute("class","box");
return newItem;
}
转载注明出处:https://blog.csdn.net/qq_43526925/article/details/94617780