s4meone,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
td.hide{
color:hsla(0, 0%, 100%, 1);
background-color: hsla(0, 0%, 100%, 1);
}
td{
background-color: hsla(0, 0%, 0%, 1);
color: hsla(0, 0%, 100%, 1);
transition: 1s;
height: 50px;
width: 50px;
font-size: 2em;
text-align: center;
}
</style>
</head>
<body>
<div id="countdown">
<h1>Осталось <span class="display">5</span> секунд</h1>
</div>
<h3 id="what"></h3>
<table>
<tbody>
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
<td id="4"></td>
<td id="5"></td>
</tr>
</tbody>
</table>
<script>
const text = ['1','2','3', '4', '5'];
const tds = document.querySelectorAll('td');
tds.forEach(td => {
let i = Math.floor(Math.random()*text.length);
let rtext = text.splice(i, 1)[0];
td.textContent = rtext;
})
const display = document.querySelector('#countdown .display');
let timeLeft = parseInt(display.innerHTML);
let x;
let timer = setInterval(function(){
if (--timeLeft >= 0) {
display.innerHTML = timeLeft;
} else {
document.querySelector('#countdown h1').style.display = 'none';
let i = Math.floor(Math.random()*tds.length);
x = tds[i].textContent;
//tds[i].textContent = ' ';
tds[i].classList.add('hide');
document.getElementById("what").textContent="Что исчезло?";
clearInterval(timer);
}
}, 1000)
</script>
</body>
</html>