Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.01.2018, 19:07
Новичок на форуме
Отправить личное сообщение для A1exy Посмотреть профиль Найти все сообщения от A1exy
 
Регистрация: 26.01.2018
Сообщений: 3

Рестарт таймера
Всем привет. Такая вот проблема. Написал скрипт таймера, не знаю как его бесконечно запускать. При рестарте таймера, должны обновляться таблицы. Буду очень благодарен за помощь.
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>&nbsp;:
        <div id="second">30</div>
    </div>


p.s. Извините. если не там тему создал

Последний раз редактировалось A1exy, 26.01.2018 в 19:18.
Ответить с цитированием
  #2 (permalink)  
Старый 26.01.2018, 20:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

обратный таймер на 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>&nbsp;:
        <div id="second" data-sec="5" ></div>
</div>

</body>
</html>

Последний раз редактировалось рони, 27.01.2018 в 16:49.
Ответить с цитированием
  #3 (permalink)  
Старый 27.01.2018, 17:01
Новичок на форуме
Отправить личное сообщение для A1exy Посмотреть профиль Найти все сообщения от A1exy
 
Регистрация: 26.01.2018
Сообщений: 3

рони,Спасибо большое. А как сделать так, чтобы таймер остановился на 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, 27.01.2018 в 17:26.
Ответить с цитированием
  #4 (permalink)  
Старый 27.01.2018, 17:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>&nbsp;:
        <div id="second" data-sec="5" ></div>
</div>

</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно внести изменения в скрипт таймера обратного отсчета времени? LADYX Элементы интерфейса 2 26.07.2016 22:25
Как сделать замену кода по истечению таймера? yted2 Общие вопросы Javascript 5 26.04.2016 17:54
продолжить работу таймера с помощью cookie dima1989 Элементы интерфейса 1 03.09.2015 09:37
Не работает сброс таймера (setTimeout и clearInterval) stankhat Events/DOM/Window 3 05.02.2015 16:55
запретить повторный запуск таймера setInterval-clearInterval mrWong Общие вопросы Javascript 1 01.02.2010 12:25