A1exy,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
window.addEventListener("DOMContentLoaded", function() {
function f() {
var min = 0;
var max = 100;
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var tableObj1 = document.createElement("table");
var tableObj2 = document.createElement("table");
tableObj1.id = "table1";
tableObj2.id = "table2";
document.body.appendChild(tableObj1);
document.body.appendChild(tableObj2);
function content(table, title, num) {
var tableHTML = "<tr><td>" + title + "</td></tr>";
for (var i = 0; i < num; i++) {
tableHTML += "<tr><td>" + f() + "</td></tr>";
}
table.innerHTML = tableHTML;
}
var minute = document.getElementById("minute");
var second = document.getElementById("second");
var time = (minute.dataset.min * 60 + +second.dataset.sec) * 1000;
var timeEnd = 0;
var timeCurren;
function timer() {
timeCurrent = timeEnd - performance.now();
if (timeCurrent <= 0) {
timeCurrent = time;
timeEnd = timeCurrent + performance.now();
content(tableObj1, " table1", 12);
content(tableObj2, " table2", 12);
}
var sec = timeCurrent / 1000 | 0;
var min = sec / 60 | 0;
sec %= 60;
minute.innerHTML = min;
second.innerHTML = sec;
requestAnimationFrame(timer);
}
timer();
});
</script>
</head>
<body>
<div >
<div id="minute" data-min="0" ></div> :
<div id="second" data-sec="5" ></div>
</div>
</body>
</html>