Форум

A1exy · #1 (**permalink**) 26.01.2018, 19:07

Всем привет. Такая вот проблема. Написал скрипт таймера, не знаю как его бесконечно запускать. При рестарте таймера, должны обновляться таблицы. Буду очень благодарен за помощь.

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. Извините. если не там тему создал

рони · #2 (**permalink**) 26.01.2018, 20:56

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>

A1exy · #3 (**permalink**) 27.01.2018, 17:01

рони,Спасибо большое. А как сделать так, чтобы таймер остановился на 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);
}

рони · #4 (**permalink**) 27.01.2018, 17:48

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>

Форум

Справочник

Discord чат

Курсы javascript