Advanced JavaScript task a record
Record program
topic
Simulate a queue, each queue element is a number, the queue is empty initially
has an input input box, and four action buttons:
Click on "the left", the digital input where the input queue is inserted from the left;
Click "the right side", the input digital input queue is inserted from the right;
click on the "left out", read and delete the first left element of the queue, and the pop numerical display elements;
click "on the right side a "read and delete queue has a first side element, and the numerical display element pop;
click on any element in the queue, the element is removed from the queue
program
<!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();Knowledge points record
- Queue method
- Method dequeued
- shift () method: the first item out of the array while the array length minus 1
- pop () method: The last item in the array is removed, and the array length minus 1
- Add Queue method
- unshift () method: add any entries in the array front end
- push () method: add any entries in the rear end of the array
- Method dequeued
- Implemented in Javascript trim () function of the two methods
Method a: invoke the prototype, i.e. simple obj.trim () forms, and widely used in this embodiment aspect, is defined as follows:
alert(document.getElementById('data').value.trim());
Method two: To invoke the tool, i.e. trim (obj) form, this embodiment can be used for special processing needs, is defined as follows:
alert(trim(document.getElementById('data').value));
- Differences in JavaScript val () and the value of
- val()
- val () when there is a jQuery plug-in to use
- Val () to get the current value of the first matching element
- val (array) check, select, radio, etc. can use whom assignment
- Value val (function (index, value)) for each set of matching elements
- val (val) matches the set value of each element
- value
- value is under no circumstances can also use jQuery plugin
- dom this.value acquired value of the object such as text radio checkbox select other
- val()
- CSS3: nth-child () selector
- : nth-child (n) matches the n-th selector of the parent element of the element type is not limited.
n may be a number, a keyword, or a formula. - Example: Using equation (an + b) Description: Represents the size of a cycle, N being a counter (starting at 0), and b is an offset. Here, we are all multiples of three indexes p element specifies the background color:
p:nth-child(3n+0)
{
background:#ff0000;
}