var count = 0;
function left_in(){
var number = document.getElementById("text").value;
if (isNaN(number) || (number < 10 || number > 100))
alert("请输入10-100的数字");
else if (count < 60) {
count++;
var divElement = document.createElement("div");
divElement.style.left = "0px";
divElement.style.height = 3 * number + "px";
var parentElement = document.getElementById("boxes");
var childrenElement = parentElement.getElementsByTagName("div");
var childrenLen = childrenElement.length;
for (var i = 0; i < childrenLen; i++)
childrenElement[i].style.left = childrenElement[i].style.left.slice(0, -2) -'0' + 22 + "px";
divElement.setAttribute("class","box");
divElement.style.top = 300 - 3 * number + "px";
divElement.onclick = function() {deleteElement(this)};
parentElement.insertBefore(divElement, childrenElement[0]);
}
else
alert("队列元素数量最多限制为60个");
}
function right_in(){
var number = document.getElementById("text").value;
if (isNaN(number) || (number < 10 || number > 100))
alert("请输入10-100的数字");
else if (count < 60) {
count++;
var divElement = document.createElement("div");
var parentElement = document.getElementById("boxes");
var childrenElement = parentElement.getElementsByTagName("div");
var childrenLen = childrenElement.length;
if (childrenLen == 0)
divElement.style.left = "0px";
else
divElement.style.left = childrenElement[childrenLen - 1].style.left.slice(0, -2) -'0' + 22 + "px";
divElement.style.top = 300 - 3 * number + "px";
divElement.style.height = 3 * number + "px";
divElement.setAttribute("class","box");
divElement.onclick = function() {deleteElement(this)};
parentElement.appendChild(divElement);
}
else
alert("队列元素数量最多限制为60个");
}
function left_out(){
var parentElement = document.getElementById("boxes");
var childrenElement = parentElement.getElementsByTagName("div");
var childrenLen = childrenElement.length;
if (childrenLen != 0) {
for (var i = 1; i < childrenLen; i++)
childrenElement[i].style.left = childrenElement[i].style.left.slice(0, -2) -'0' - 22 + "px";
parentElement.removeChild(childrenElement[0]);
count--;
}
}
function right_out(){
var parentElement = document.getElementById("boxes");
var childrenElement = parentElement.getElementsByTagName("div");
var childrenLen = childrenElement.length;
if (childrenLen != 0) {
parentElement.removeChild(childrenElement[childrenLen - 1]);
count--;
}
}
function deleteElement(node){
var parentElement = document.getElementById("boxes");
var next = node.nextSibling;
while (next != null) {
next.style.left = next.style.left.slice(0, -2) -'0' - 22 + "px";
next = next.nextSibling;
}
parentElement.removeChild(node);
count--;
}
function random(){
var numbers = [];
for (var i = 0; i < 60; i++) {
var number = Math.floor(Math.random() * 90 + 10);
numbers.push(number);
var divElement = document.createElement("div");
var parentElement = document.getElementById("boxes");
divElement.style.left = i * 20 + i * 2 + "px";
divElement.style.top = 300 - 3 * number + "px";
divElement.style.height = 3 * number + "px";
divElement.setAttribute("class","box");
parentElement.appendChild(divElement);
}
return numbers;
}
function sort(){
var numbers = random();
var parentElement = document.getElementById("boxes");
var i = 0, j = 0;
var time = setInterval(function() {
if (i < numbers.length) {
if (j < numbers.length - i) {
if (numbers[j] > numbers[j + 1]) {
var temp = numbers[j];
numbers[j] = numbers[j + 1];
numbers[j + 1] = temp;
parentElement.innerHTML = "";
for (var k = 0; k < numbers.length; k++) {
var textNode = document.createTextNode(numbers[k]);
var divElement = document.createElement("div");
divElement.appendChild(textNode);
divElement.style.left = k * 20 + k * 2 + "px";
divElement.style.top = 300 - 3 * numbers[k] + "px";
divElement.style.height = 3 * numbers[k] + "px";
divElement.setAttribute("class","box");
parentElement.appendChild(divElement);
}
}
j++;
}
else{
i++;
j = 0;
}
}
else {
clearInterval(time);
return;
}
}, 100);
}
【ife】任务十九:基础JavaScript练习(二)
最新推荐文章于 2022-08-18 11:40:21 发布