Остановка секундомера по достижению значения
Есть секундомер
var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);
function setTime() {
++totalSeconds;
secondsLabel.innerHTML = pad(totalSeconds % 99);
minutesLabel.innerHTML = pad(parseInt(totalSeconds / 99));
}
function pad(val) {
var valString = val + "";
if (valString.length < 2) {
return "0" + valString;
} else {
return valString;
}
}
<label id="minutes">00</label> метров <label id="seconds">00</label> сантиметров <div id="info">Информация</div> Нужно что бы секундомер бым в метра и сантиметрах, по достижению 20 метро и 00 сантиметров, показывался блок "div id="info" , а сам секундомер останавливался и больше не запускался (запись в куки я так понял) Гугл шерстил хорошо, и подобных решений не нашел |
Я установил что 1 минута (метр) считаеться после достижения 99 секунд (сантиметры)
|
neowaring, метр — это единица для измерения расстояния, а секунда — для измерения времени. Поскольку вы хотите измерять время, то вам нужно использовать секунды для своих измерении!
Для измерения бо́льших интервалов времени используется, например — минута, которая составляет 60 секунд. Если вы заинтересованы в измерении времени по 100 секунд, то вы можете использовать гектосекунду, которая составляет 100 секунд. Вот ваш пример...
<label id="minutes">00</label> <abbr title="гектосекунда">гс</abbr>
<label id="seconds">00</label> <abbr title="секунда">с</abbr>
<div id="info" hidden>Информация</div>
<style> html {font: 250% serif;} abbr {cursor: help;}</style>
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>
<script>
const isLapsed = "isLapsed" in localStorage;
const minutesLabel = document.getElementById("minutes");
const secondsLabel = document.getElementById("seconds");
const infoElement = document.getElementById("info");
if(isLapsed) {
infoElement.hidden = false;
} else {
const startTime = Date.now();
(function loop() {
const passedSeconds = 0.001 * (Date.now() - startTime);
secondsLabel.innerHTML = parseInt(passedSeconds % 100).toString().padStart(2, "0");
minutesLabel.innerHTML = parseInt(passedSeconds / 100).toString().padStart(2, "0");
if(passedSeconds >= 2000) {
infoElement.hidden = false;
localStorage.isLapsed = true;
} else {
setTimeout(loop, 500);
}
})();
}
</script>
Запомните...
|
Цитата:
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label id="minutes">00</label> <abbr title="гектосекунда">гс</abbr>
<label id="seconds">00</label> <abbr title="секунда">с</abbr>
<div id="info" hidden>Информация</div>
<style> html {font: 250% serif;} abbr {cursor: help;}</style>
<script>
const isLapsed = "isLapsed" in localStorage;
const minutesLabel = document.getElementById("minutes");
const secondsLabel = document.getElementById("seconds");
const infoElement = document.getElementById("info");
if(isLapsed) {
infoElement.hidden = false;
} else {
const startTime = Date.now();
(function loop() {
const passedSeconds = 0.001 * (Date.now() - startTime);
secondsLabel.innerHTML = parseInt(passedSeconds % 100).toString().padStart(2, "0");
minutesLabel.innerHTML = parseInt(passedSeconds / 100).toString().padStart(2, "0");
if(passedSeconds >= 2000) {
infoElement.hidden = false;
localStorage.isLapsed = true;
} else {
setTimeout(loop, 500);
}
})();
}
</script>
</body>
</html>
|
Цитата:
Возможно вы используете старый браузер, и вам нужно добавить костыли (polyfill) для эмуляции недостающих методов! Добавил в пример выше! Цитата:
|
Цитата:
Вот результат который я пытаюсь получить. Отсчет сантиметров и метров в шапке сайта |
| Часовой пояс GMT +3, время: 04:05. |