A1exy,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#table1{
background-color: #FFDAB9;
}
</style>
<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;
}
function chg() {
var d1 = document.getElementById("table1");
var d2 = document.getElementById("table2");
var d11 = d1.cloneNode(true);
var d22 = d2.cloneNode(true);
d2.parentNode.insertBefore(d11, d2);
d1.parentNode.insertBefore(d22, d1);
d1.parentNode.removeChild(d1);
d2.parentNode.removeChild(d2);
}
var minute = document.getElementById("minute");
var second = document.getElementById("second");
var time = (minute.dataset.min * 60 + +second.dataset.sec) * 1000;
var timeEnd;
var timeCurrent;
function setContent() {
tableObj1 = document.getElementById("table1");
tableObj2 = document.getElementById("table2");
content(tableObj1, " table1", 12);
content(tableObj2, " table2", 12);
}
function init() {
timeCurrent = time;
timeEnd = timeCurrent + performance.now();
setContent();
timer();
window.setTimeout(chg, 2 * 1000);
}
function timer() {
timeCurrent = timeEnd - performance.now();
if (timeCurrent <= 0) {
window.setTimeout(init, 10 * 1000);
} else {
requestAnimationFrame(timer);
}
var sec = timeCurrent / 1000 | 0;
var min = sec / 60 | 0;
sec %= 60;
minute.innerHTML = min;
second.innerHTML = sec;
}
init();
});
</script>
</head>
<body>
<div >
<div id="minute" data-min="0" ></div> :
<div id="second" data-sec="5" ></div>
</div>
</body>
</html>