update to make it work when it's out of focus
This commit is contained in:
parent
10022e6d93
commit
cd314cfe4a
2 changed files with 47 additions and 21 deletions
|
@ -9,13 +9,39 @@ const sound = new Audio('/assets/pipe.mp3');
|
|||
let timer = null;
|
||||
let isActive = false;
|
||||
let remainingTime = 0;
|
||||
let startTime = null;
|
||||
|
||||
function formatTime(duration) {
|
||||
const milliseconds = Math.floor((duration % 1000) / 10);
|
||||
const seconds = Math.floor((duration / 1000) % 60);
|
||||
const minutes = Math.floor((duration / 1000 / 60) % 60);
|
||||
const hours = Math.floor(duration / 1000 / 60 / 60);
|
||||
return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}:${String(milliseconds).padStart(2, '0')}`;
|
||||
return `${
|
||||
String(hours).padStart(2, '0')
|
||||
}:${
|
||||
String(minutes).padStart(2, '0')
|
||||
}:${
|
||||
String(seconds).padStart(2, '0')
|
||||
}:${
|
||||
String(milliseconds).padStart(2, '0')
|
||||
}`;
|
||||
}
|
||||
|
||||
function updateTimer() {
|
||||
const now = Date.now();
|
||||
const elapsed = now - startTime;
|
||||
remainingTime -= elapsed;
|
||||
startTime = now;
|
||||
|
||||
if (remainingTime <= 0) {
|
||||
clearInterval(timer);
|
||||
sound.play();
|
||||
time.textContent = "00:00:00:00";
|
||||
isActive = false;
|
||||
start.innerHTML = "Start";
|
||||
} else {
|
||||
time.textContent = formatTime(remainingTime);
|
||||
}
|
||||
}
|
||||
|
||||
start.addEventListener('click', () => {
|
||||
|
@ -38,19 +64,9 @@ start.addEventListener('click', () => {
|
|||
|
||||
isActive = true;
|
||||
start.innerHTML = "Stop";
|
||||
startTime = Date.now();
|
||||
|
||||
timer = setInterval(() => {
|
||||
remainingTime -= 10;
|
||||
if (remainingTime <= 0) {
|
||||
clearInterval(timer);
|
||||
sound.play();
|
||||
time.textContent = "00:00:00:00";
|
||||
isActive = false;
|
||||
start.innerHTML = "Start";
|
||||
} else {
|
||||
time.textContent = formatTime(remainingTime);
|
||||
}
|
||||
}, 10);
|
||||
timer = setInterval(updateTimer, 10);
|
||||
} else {
|
||||
isActive = false;
|
||||
clearInterval(timer);
|
||||
|
|
|
@ -12,10 +12,23 @@ let elapsedTime = 0;
|
|||
function formatTime(duration) {
|
||||
const milliseconds = Math.floor((duration % 1000) / 10);
|
||||
const seconds = Math.floor((duration / 1000) % 60);
|
||||
const minutes = Math.floor((duration / 1000) / 60);
|
||||
const hours = Math.floor((duration / 1000) / 60 / 60);
|
||||
const minutes = Math.floor((duration / 1000) / 60) % 60;
|
||||
const hours = Math.floor((duration / 1000) / 3600);
|
||||
return `
|
||||
${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}:${String(milliseconds).padStart(2, '0')}`;
|
||||
${
|
||||
String(hours).padStart(2, '0')
|
||||
}:${
|
||||
String(minutes).padStart(2, '0')
|
||||
}:${
|
||||
String(seconds).padStart(2, '0')
|
||||
}:${
|
||||
String(milliseconds).padStart(2, '0')
|
||||
}`;
|
||||
}
|
||||
|
||||
function updateTimer() {
|
||||
elapsedTime = Date.now() - startTime;
|
||||
time.textContent = formatTime(elapsedTime);
|
||||
}
|
||||
|
||||
start.addEventListener('click', () => {
|
||||
|
@ -23,10 +36,7 @@ start.addEventListener('click', () => {
|
|||
isActive = true;
|
||||
start.innerHTML = "Stop";
|
||||
startTime = Date.now() - elapsedTime;
|
||||
timer = setInterval(() => {
|
||||
elapsedTime = Date.now() - startTime;
|
||||
time.textContent = formatTime(elapsedTime);
|
||||
}, 10);
|
||||
timer = setInterval(updateTimer, 10);
|
||||
} else {
|
||||
isActive = false;
|
||||
clearInterval(timer);
|
||||
|
|
Loading…
Add table
Reference in a new issue