爱站程序员基地<!DOCTYPE HTML><html lang = \'en\'><head><meta charset = \'UTF-8\'/><title>Document</title><style>*{padding:0;margin:0;}.boundary{position:relative;overflow:hidden;width:500px;height:800px;border:10px solid black;margin:0 auto;margin-top:50px;}button{position:absolute;width:500px;height:150px;font-size:50px;background-color:#FFC0CB;z-index:2;}.box{position:absolute;width:500px;height:200px;z-index:1;}</style></head><body><div class = \'boundary\'><button>Let\'s Go</button><div class = \'box\'></div><div class = \'box\'></div><div class = \'box\'></div><div class = \'box\'></div><div class = \'box\'></div></div><script>var num = 0;var num1 = 1;var num2 = 1;var num3 = 1;var num4 = 1;var num5 = 1;var numNew = 1;var divBox = document.getElementsByClassName(\"box\")[0];var divBox2 = document.getElementsByClassName(\"box\")[1];var divBox3 = document.getElementsByClassName(\"box\")[2];var divBox4 = document.getElementsByClassName(\"box\")[3];var divBox5 = document.getElementsByClassName(\"box\")[4];var button = document.getElementsByTagName(\'button\')[0];var arrDivNew = [];var arrDivNew2 = [];var arrDivNew3 = [];var arrDivNew4 = [];var arrDivNew5 = [];button.onclick = function(){//当按钮点击后消失button.style.display = \"none\";//往页面中的class = \'box\'的div插入5个小divfor(var i = 0; i < 5; i++){arrDivNew[i] = document.createElement(\'div\');arrDivNew[i].style.width = 100 + \'px\';arrDivNew[i].style.height = 200 + \'px\';arrDivNew[i].style.border = \'1px solid black\';arrDivNew[i].style.float = \'left\';arrDivNew[i].style.boxSizing = \'border-box\';divBox.appendChild(arrDivNew[i]);}//往页面中的class = \'box\'的div插入5个小divfor(var i = 0; i < 5; i++){arrDivNew2[i] = document.createElement(\'div\');arrDivNew2[i].style.width = 100 + \'px\';arrDivNew2[i].style.height = 200 + \'px\';arrDivNew2[i].style.border = \'1px solid black\';arrDivNew2[i].style.float = \'left\';arrDivNew2[i].style.boxSizing = \'border-box\';divBox2.appendChild(arrDivNew2[i]);}//往页面中的class = \'box\'的div插入5个小divfor(var i = 0; i < 5; i++){arrDivNew3[i] = document.createElement(\'div\');arrDivNew3[i].style.width = 100 + \'px\';arrDivNew3[i].style.height = 200 + \'px\';arrDivNew3[i].style.border = \'1px solid black\';arrDivNew3[i].style.float = \'left\';arrDivNew3[i].style.boxSizing = \'border-box\';divBox3.appendChild(arrDivNew3[i]);}//往页面中的class = \'box\'的div插入5个小divfor(var i = 0; i < 5; i++){arrDivNew4[i] = document.createElement(\'div\');arrDivNew4[i].style.width = 100 + \'px\';arrDivNew4[i].style.height = 200 + \'px\';arrDivNew4[i].style.border = \'1px solid black\';arrDivNew4[i].style.float = \'left\';arrDivNew4[i].style.boxSizing = \'border-box\';divBox4.appendChild(arrDivNew4[i]);}//往页面中的class = \'box\'的div插入5个小divfor(var i = 0; i < 5; i++){arrDivNew5[i] = document.createElement(\'div\');arrDivNew5[i].style.width = 100 + \'px\';arrDivNew5[i].style.height = 200 + \'px\';arrDivNew5[i].style.border = \'1px solid black\';arrDivNew5[i].style.float = \'left\';arrDivNew5[i].style.boxSizing = \'border-box\';divBox5.appendChild(arrDivNew5[i]);}//让5行小div动起来divBox5.style.bottom = 800 + \'px\';divBox.style.bottom = 600 + \'px\';divBox2.style.bottom = 400 + \'px\';divBox3.style.bottom = 200 + \'px\';divBox4.style.bottom = 0 + \'px\';var timer = setInterval(function(){if(num >= 0 && num <= 10){numNew = 1;}else if(num > 10 && num <= 15){numNew = 2;}else if(num > 15 && num <= 23){numNew = 3;}else if(num > 23 && num <= 40){numNew = 4;}else if(num > 50 && num <= 60){numNew = 4.2;}else if(num > 60 && num <= 70){numNew = 4.4;}else if(num > 70 && num <= 80){numNew = 4.6;}else if(num > 80 && num <= 90){numNew = 4.8;}else{numNew = 5;}var back5 = Math.floor(Math.random()*5);if(parseInt(divBox5.style.bottom) <= -200){divBox5.style.bottom = 801 + \'px\';num5 = 0;}if(parseInt(divBox5.style.bottom) === 801){for(var i = 0; i < 5; i++){if(i != back5){arrDivNew5[i].style.backgroundColor = \'transparent\';arrDivNew5[i].onclick = function(){this.style.backgroundColor = \'gray\';alert(\'积分数量：\' + num + \' 继续加油!\');num = 0;clearInterval(timer);}}else{arrDivNew5[i].style.backgroundColor = \'#FFC0CB\';arrDivNew5[i].onclick = function(){this.style.backgroundColor = \'gray\';num++;num5 = 1;}}}}divBox5.style.bottom = parseInt(divBox5.style.bottom) - numNew + \'px\';if(parseInt(divBox5.style.bottom) < 0&&num5 === 0){alert(\'积分数量：\' + num + \' 继续加油!\');num = 0;clearInterval(timer);}var back = Math.floor(Math.random()*5);if(parseInt(divBox.style.bottom) <= -200){divBox.style.bottom = 801 + \'px\';num1 = 0;}if(parseInt(divBox.style.bottom) === 801){for(var i = 0; i < 5; i++){if(i != back){arrDivNew[i].style.backgroundColor = \'transparent\';arrDivNew[i].onclick = function(){this.style.backgroundColor = \'gray\';alert(\'积分数量：\' + num + \' 继续加油!\');num = 0;clearInterval(timer);}}else{arrDivNew[i].style.backgroundColor = \'#FFC0CB\';arrDivNew[i].onclick = function(){this.style.backgroundColor = \'gray\';num++;num1 = 1;}}}}divBox.style.bottom = parseInt(divBox.style.bottom) - numNew + \'px\';if(parseInt(divBox.style.bottom) < 0&&num1 === 0){alert(\'积分数量：\' + num + \' 继续加油!\');num = 0;clearInterval(timer);}var back2 = Math.floor(Math.random()*5);if(parseInt(divBox2.style.bottom) <= -200){divBox2.style.bottom = 801 + \'px\';num2 = 0;}if(parseInt(divBox2.style.bottom) === 801){for(var i = 0; i < 5; i++){if(i != back2){arrDivNew2[i].style.backgroundColor = \'transparent\';arrDivNew2[i].onclick = function(){this.style.backgroundColor = \'gray\';alert(\'积分数量：\' + num + \' 继续加油!\');num = 0;clearInterval(timer);}}else{arrDivNew2[i].style.backgroundColor = \'#FFC0CB\';arrDivNew2[i].onclick = function(){this.style.backgroundColor = \'gray\';num++;num2 = 1;}}}}divBox2.style.bottom = parseInt(divBox2.style.bottom) - numNew + \'px\';if(parseInt(divBox2.style.bottom) < 0&&num2 === 0){alert(\'积分数量：\' + num + \' 继续加油!\');num = 0;clearInterval(timer);}var back3 = Math.floor(Math.random()*5);if(parseInt(divBox3.style.bottom) <= -200){divBox3.style.bottom = 801 + \'px\';num3 = 0;}if(parseInt(divBox3.style.bottom) === 801){for(var i = 0; i < 5; i++){if(i != back3){arrDivNew3[i].style.backgroundColor = \'transparent\';arrDivNew3[i].onclick = function(){this.style.backgroundColor = \'gray\';alert(\'积分数量：\' + num + \' 继续加油!\');num = 0;clearInterval(timer);}}else{arrDivNew3[i].style.backgroundColor = \'#FFC0CB\';arrDivNew3[i].onclick = function(){this.style.backgroundColor = \'gray\';num++;num3 = 1;}}}}divBox3.style.bottom = parseInt(divBox3.style.bottom) - numNew + \'px\';if(parseInt(divBox3.style.bottom) < 0&&num3 === 0){alert(\'积分数量：\' + num + \' 继续加油!\');num = 0;clearInterval(timer);}var back4 = Math.floor(Math.random() * 5);if(parseInt(divBox4.style.bottom) <= -200){divBox4.style.bottom = 801 + \'px\';num4 = 0;}if(parseInt(divBox4.style.bottom) === 801){for(var i = 0; i < 5; i++){if(i != back4){arrDivNew4[i].style.backgroundColor = \'transparent\';arrDivNew4[i].onclick = function(){this.style.backgroundColor = \'gray\';alert(\'积分数量：\' + num + \' 继续加油!\');num = 0;clearInterval(timer);}}else{arrDivNew4[i].style.backgroundColor = \'#FFC0CB\';arrDivNew4[i].onclick = function(){this.style.backgroundColor = \'gray\';num++;num4 = 1;}}}}divBox4.style.bottom = parseInt(divBox4.style.bottom) - numNew + \'px\';if(parseInt(divBox4.style.bottom) < 0&&num4 === 0){alert(\'积分数量：\' + num + \' 继续加油!\');num = 0;clearInterval(timer);}}, 10);}</script></body></html>
