-
-
Save secretpray/3eb0fda899159b6f2191a30772fc4929 to your computer and use it in GitHub Desktop.
// Timer 5 sec -> count = 5000 | |
// stop timer -> running = false | |
var count = 5000, | |
running = true, | |
secondsNode = document.getElementById("seconds"), | |
millisecondsNode = document.getElementById("milliseconds"), | |
mOld, | |
mNew; | |
function draw() { | |
if (count > 0 && running) { | |
requestAnimationFrame(draw); | |
mNew = new Date().getTime(); | |
count = count - mNew + mOld; | |
count = count >= 0 ? count : 0; | |
mOld = mNew; | |
secondsNode.innerHTML = Math.floor(count / 1000); | |
millisecondsNode.innerHTML = count % 1000; | |
} else { | |
secondsNode.innerHTML = 0 | |
millisecondsNode.innerHTML = 0 | |
} | |
} | |
mOld = new Date().getTime(); | |
draw(); | |
// If need break by key | |
window.addEventListener("keydown", function(e) { | |
switch (e.keyCode) { | |
case 32: // PLAY (Start/Stop) | |
if (running) { | |
running = false; | |
} else { | |
running = true; | |
mOld = new Date().getTime(); | |
draw(); | |
} | |
break; | |
case 82: // RESET | |
count = 24000; | |
secondsNode.innerHTML = 24; | |
millisecondsNode.innerHTML = 0; | |
running = false; | |
} | |
}); | |
// css | |
p { | |
font-family: helvetica; | |
font-size: 100px; | |
text-align: center; | |
} | |
// html | |
<p><span id="seconds">24</span> secs and <span id="milliseconds">000</span> milliseconds</p> |
// timer
var count = 2500, // 2.5 sec
running = true,
mOld,
mNew;
function draw() {
if (count > 0 && running) {
requestAnimationFrame(draw);
mNew = new Date().getTime();
count = count - mNew + mOld;
count = count >= 0 ? count : 0;
mOld = mNew;
document.getElementById("seconds").innerHTML = Math.floor(count / 1000);
document.getElementById("milliseconds").innerHTML = count % 1000;
} else {
document.getElementById("seconds").innerHTML = 0
document.getElementById("milliseconds").innerHTML = 0
}
}
used:
const intersections = new Map(); // Auutoscroll only after delay
const intersectionChanged = (entry) => {
if (entry.isIntersecting && document.querySelector("a[rel='next']")) {
loader.classList.add("show");
mOld = new Date().getTime();
running = true
count = 2500
draw();
intersections.set(entry.target, setInterval(() => {
loader.classList.remove("show");
running = false
getData()
}, 2500));
} else if (!entry.isIntersecting && intersections.get(entry.target) != null) {
loader.classList.remove("show");
running = false
// console.log('Infinity scroll disabled');
clearInterval(intersections.get(entry.target));
}
};
var count = 24,
intervalMs = 10,
counter = setInterval(timer, intervalMs),
running = true,
msRemaining = 1000;
function timer() {
msRemaining -= intervalMs;
if (msRemaining <= 0)
{
count -= 1;
if (count <= 0) {
clearInterval(counter);
}
msRemaining = 1000;
}
}