Рестарт таймера
Всем привет. Такая вот проблема. Написал скрипт таймера, не знаю как его бесконечно запускать. При рестарте таймера, должны обновляться таблицы. Буду очень благодарен за помощь.
window.onload = function() {
function f(x) {
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';
var tableHTML1 = '<tr><td>table1</td></tr>';
var tableHTML2 = '<tr><td>table2</td></tr>';
for (var i = 1; i <= 12; i++) {
tableHTML1 += '<tr><td>' + f(i) + '</td></tr>';
tableHTML2 += '<tr><td>' + f(i) + '</td></tr>';
}
tableObj1.innerHTML = tableHTML1;
document.body.appendChild(tableObj1);
tableObj2.innerHTML = tableHTML2;
document.body.appendChild(tableObj2);
function timer() {
var minute = document.getElementById('minute').innerHTML;
var second = document.getElementById('second').innerHTML;
var end = false;
if (second > 0) second--;
else {
second = 60;
if (minute > 0) minute--;
else {
second = 60;
end = true;
}
}
switch (second) {
case 40:
chg();
break;
case 20:
chg();
break;
}
if (end) {
clearInterval(intervalID);
} else {
document.getElementById('minute').innerHTML = minute;
document.getElementById('second').innerHTML = second;
}
}
window.intervalID = setInterval(timer, 1000);
}
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);
}
<div id="timer">
<div id="minute">01</div> :
<div id="second">30</div>
</div>
p.s. Извините. если не там тему создал |
обратный таймер на requestAnimationFrame
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>
|
рони,Спасибо большое. А как сделать так, чтобы таймер остановился на 0, и только через 10 секунд возобновился. При этом, например на 2 секунде они поменялись вот так
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);
}
|
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>
|
| Часовой пояс GMT +3, время: 09:06. |