模拟一个队列，队列的每个元素是一个数字，初始队列为空
有一个input输入框，以及4个操作按钮:
点击"左侧入"，将input中输入的数字从左侧插入队列中；
点击"右侧入"，将input中输入的数字从右侧插入队列中；
点击"左侧出"，读取并删除队列左侧第一个元素，并弹窗显示元素中数值；
点击"右侧出"，读取并删除队列又侧第一个元素，并弹窗显示元素中数值；
点击队列中任何一个元素，则该元素会被从队列中删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="进阶任务一.css">
</head>
<body>
<input type="text" id="data-input">
<button id="left-in">左侧入</button>
<button id="right-in">右侧入</button>
<button id="left-out">左侧出</button>
<button id="right-out">右侧出</button>
<div id="view"></div>
<script src="JavaScript进阶任务一.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>#left-in,
#right-in,
#left-out,
#right-out {
background-color: #fff;
border: 1px solid rgb(214, 211, 211);
border-radius: 10px;
}
#left-out {
margin-left: 30px;
}
#view div {
width: 30px;
height: 30px;
line-height: 30px;
padding: 5px;
margin: 15px 15px 0 0;
float: left;
color: #fff;
}
#view div {
background-color: red;
}var leftIn = document.getElementById("left-in");
var leftOut = document.getElementById("left-out");
var rightIn = document.getElementById("right-in");
var rightOut = document.getElementById("right-out");
var dataInput = document.getElementById("data-input")
var dataStore = [];
function addData() {
var data = dataInput.value.trim();
return data;
}
function renderList() {
var text = " ";
for (var i = 0; i < dataStore.length; i++) {
text += "<div>" + dataStore[i] + "<div>";
}
view.innerHTML = text;
}
function init() {
leftIn.addEventListener("click", function() {
var data = addData();
dataStore.unshift(data);
renderList();
})
leftOut.addEventListener("click", function() {
var data = dataStore.shift();
renderList();
alert(data);
})
rightIn.addEventListener("click", function() {
var data = addData();
dataStore.push(data);
renderList();
})
rightOut.addEventListener("click", function() {
var data = dataStore.pop();
renderList();
alert(data);
})
}
init();方法一：以原型方式调用，即obj.trim()形式，此方式简单且使用方面广泛，定义方式如下：
alert(document.getElementById(‘data‘).value.trim());
方法二:以工具方式调用，即trim(obj)的形式，此方式可以用于特殊处理需要，定义方式如下：
alert(trim(document.getElementById(‘data‘).value));
p:nth-child(3n+0)
{
background:#ff0000;
}原文：https://www.cnblogs.com/fish1217/p/11489070.html