[js]①栈和队列~2、简单队列--数据结构回忆小笔记-CSDN博客

本文链接：https://blog.csdn.net/qq_19603139/article/details/78599752

队列遵从先进先出原则~没啥好说，直接附上代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="../../../H5/jquery-3.1.1.min.js"></script>
	<script>
		$(function(){

			function initQueue(){
				this.front = 0;
				this.rear = 0;
				this.arr = new Array();
				//入队列
				this.inQueue = function(num){
					this.arr[this.rear++] = num;
				}	

				//出队列
				this.outQueue = function(){
					if(this.isempty()){
						alert("队列为空！！")
					}
					else{
						this.arr.splice(this.front,1);
						this.rear--;
					}
				}	

				//判断是否为空
				this.isempty = function(){
					if(this.front == this.rear){
						return true;
					}
					else{
						return false;
					}

				}
				this.del = function(){
					if(this.isempty()){
						alert("队列已为空！！")
					}
					else{
						while(!this.isempty()){
							this.outQueue();
						}
					}
				}
			}

			var one = new initQueue();
			$("#in").click(function(event) {
				one.inQueue($('#num').val());
				console.log(one.arr);
				$('#display').text(one.arr);
			});
			$("#out").click(function(event) {
				one.outQueue();
				console.log(one.arr);
				$('#display').text(one.arr);			
			});
			$("#del").click(function(event) {
				one.del();
				$('#display').text(one.arr);			
			});

		})
	</script>
	<style>
		*{
			margin: 0;
			padding: 0;	
		}
	</style>
</head>
<body>
	<form action="">
		<input type="text" id="num">
		<input type="button" value="进队列" id="in">
		<input type="button" value="出队列" id="out">
		<input type="button" value="删除" id="del">
	</form>
	<div id="display">
		
	</div>
</body>
</html>