JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: black;
}
#block, body{
padding:0;
margin:0;
border:0;
}
#block div{
text-align:center;
float: left;
width:0.8em;
/*border:1px solid silver;*/
}
#block div span{
display:block;
color:#00EE00;
}
</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 = Math.floor(clientWidth / 13);
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);
afterOutput();
}
var span = document.createElement('span');
span.setAttribute('class',columNum + "." + myI);
span.setAttribute('id',columNum + "." + myI);
span.textContent = getRandomNum(0,9);
colum.appendChild(span);
myI++
},30);
}
var makingColumsInterval = setTimeout(function rekurs(){
if(randNumbersArray.length === columQty){
clearTimeout(makingColumsInterval);
}
var randomNum = getRandomNum(1, columQty);
if(randNumbersArray.indexOf(randomNum) === -1) {
...