<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#block, body{
padding:0;
margin:0;
border:0;
}
#block div{
text-align:center;
float: left;
width:1em;
/*border:1px solid silver;*/
}
#block div span{
display:block;
}
</style>
</head>
<body>
<script>
var randNumbersArray = [];
var block = document.createElement('div');
block.setAttribute('id', 'block');
block.style.height = "10000px"
var clientWidth = document.documentElement.clientWidth;
var columQty = 50;
// var columQty = Math.floor(clientWidth / 16);
block.style.height = "";
function getSections(){ //Создание и вставка секций в div#block,которую затем в начало body.
for(var i = 1; i <= columQty; i++){
var div = document.createElement('div');
div.setAttribute('id','section-' + i);
div.setAttribute('class', 'section');
block.appendChild(div);
}
document.body.insertBefore(block, document.body.firstChild);
}
getSections();
function getRandomNum(min,max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function outputNumbers(columNum){ //Вывод чисел на монитор. Путём добавления span в section-$
var colum = document.getElementById(columNum);
var myI = 1;
var intervalOutputing = setInterval(function(){
if(myI == 50){
clearInterval(intervalOutputing);
}
var span = document.createElement('span');
span.setAttribute('class',columNum + "." + myI);
span.textContent = getRandomNum(0,9);
colum.appendChild(span);
myI++
},50);
}
var makingColumsInterval = setInterval(function(){
var randomNum = getRandomNum(1, columQty);
if(randNumbersArray.length == 0){
randNumbersArray.push(randomNum);
} else if(randNumbersArray.length == columQty){
clearInterval(makingColumsInterval);
} else{
for(var i = 0; i <= randNumbersArray.length; i++){
if(randNumbersArray.indexOf(randomNum) > (-1)){
i--;
break;
} else{
randNumbersArray.push(randomNum);
break;
}
}
}
var columNum = "section-" + randNumbersArray[randNumbersArray.length - 1];
outputNumbers(columNum);
},10);
</script>
</body>
</html>var intervalOutputing = setInterval(function(){
if(myI == 50){
clearInterval(intervalOutputing);
}
var span = document.createElement('span');
span.setAttribute('class',columNum + "." + myI);
span.textContent = getRandomNum(0,9);
colum.appendChild(span);
myI++
},50);
var makingColumsInterval = setInterval(function(){
if(randNumbersArray.length === columQty){
clearInterval(makingColumsInterval);
}
var randomNum = getRandomNum(1, columQty);
if(randNumbersArray.indexOf(randomNum) === -1) {
randNumbersArray.push(randomNum);
outputNumbers("section-" + randNumbersArray[randNumbersArray.length - 1]);
}
},10);