进阶JavaScript练习Task1

最新推荐文章于 2022-03-31 21:07:16 发布

ZzDIY

最新推荐文章于 2022-03-31 21:07:16 发布

阅读量232

点赞数

分类专栏： js训练文章标签： javascript

本文链接：https://blog.csdn.net/qq_43526925/article/details/94617780

版权

js训练专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用JavaScript模拟队列操作，包括从左侧和右侧插入、删除元素，以及展示队列元素的功能。通过Google Chrome浏览器和Visual Studio Code进行开发，提供了HTML、CSS和JS的实现步骤，读者可以跟随教程完成一个交互式的队列操作应用。

摘要由CSDN通过智能技术生成

浏览器：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;
}

先写获取点击

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

ZzDIY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
进阶JavaScript练习Task1

浏览器：Google Chrome编译器：Visual Studio Code任务目的模拟一个队列，队列的每个元素是一个数字，初始队列为空有一个input输入框，以及4个操作按钮1. 点击"左侧入"，将input中输入的数字从左侧插入队列中；2. 点击"右侧入"，将input中输入的数字从右侧插入队列中；3. 点击"左侧出"，读取并删除队列左侧第一个元素，并弹窗显示元素中数值；4...
复制链接

扫一扫