my idea is that an array saves the queue, pops up the logarithmic array operation each time, then clears the queue elements of the html, and renders it with the queue array.
ask for boss debugging:)
https://codepen.io/xyj/pen/Pe.
html:
<input type="text" name="" id = "ipt">
<button id = "ipt_left" onclick = "ipt_left()"></button>
js:
var list = [];
function ipt(){
var x = document.getElementById("ipt").value;
return x;
}
function ipt_left(){
var x = ipt();
list.unshift(x);
remove();
render();
}
function render(){
for (var i = 0; i < list.length; PPi){
var div = document.createElement("div");
div.className = "item";
div.innerHTML = list[i];
div.style.display = "inline-block";
div.style.backgroundColor = "-sharpe83423";
div.style.margin = "10px";
div.style.width = "50px";
div.style.height = "50px";
div.style.color = "-sharpfff";
div.style.fontSize = "40px";
div.style.textAlign = "center";
document.getElementById("queue").appendChild(div);
}
}
function remove(){
var divs = document.getElementsByClassName("item");
console.log(divs);
console.log(list);
for (var i = 0; i < divs.length; PPi){
divs[i].parentNode.removeChild(divs[i]);
}
}
effect:
start with two good