diff options
author | zlg <zlg@zlg.space> | 2024-08-16 07:24:17 -0700 |
---|---|---|
committer | zlg <zlg@zlg.space> | 2024-08-17 01:46:52 -0700 |
commit | 0f06c4ac974a388320da4a014a77ef26566b27f0 (patch) | |
tree | 30d63829be75c6a393a8fcf3f73e4ce25e681fee /timer.js | |
parent | Update footer (diff) | |
download | zsst-0f06c4ac974a388320da4a014a77ef26566b27f0.tar.gz zsst-0f06c4ac974a388320da4a014a77ef26566b27f0.tar.bz2 zsst-0f06c4ac974a388320da4a014a77ef26566b27f0.tar.xz zsst-0f06c4ac974a388320da4a014a77ef26566b27f0.zip |
Add progress bar countdown style
Diffstat (limited to 'timer.js')
-rw-r--r-- | timer.js | 36 |
1 files changed, 35 insertions, 1 deletions
@@ -1,7 +1,9 @@ let params; let cur_seconds = null; let timer_id; -const cd = document.getElementById("countdown"); +let cd; + +const page = document.getElementById("page"); function setupCountdown() { params = new URLSearchParams(document.location.search); @@ -9,12 +11,37 @@ function setupCountdown() { console.log(`${key}: ${value}`); } + switch (params.get("cdstyle")) { + case "standard": + page.innerHTML = ` + <div id="countdown"> + <div id="minutes">00</div> + <div id="separator">:</div> + <div id="seconds">00</div> + </div> + `; + break; + case "bar": + page.innerHTML = ` + <div id="bar"><div id="progress"></div> + <div id="countdown"> + <div id="minutes">00</div> + <div id="separator">:</div> + <div id="seconds">00</div> + </div> + `; + break; + } + cd = document.getElementById("countdown"); cur_seconds = parseInt(params.get("duration")); if (params.get("f_family") !== "") { cd.style.fontFamily = params.get("f_family"); } cd.style.color = params.get("f_color"); + if (params.get("cdstyle") == "bar") { + document.getElementById("progress").style.backgroundColor = params.get("b_color"); + } draw(); timer_id = window.setInterval(tick, 1000); @@ -33,6 +60,9 @@ function tick() { } cur_seconds--; draw(); + if (params.get("cdstyle") == "bar") { + draw_bar(); + } } function draw() { @@ -40,6 +70,10 @@ function draw() { document.getElementById("seconds").textContent = zero_pad((cur_seconds % 60)); } +function draw_bar() { + document.getElementById("progress").style.width = (((params.get("duration") - cur_seconds) / params.get("duration")) * 100) + "vw"; +} + function zero_pad(num) { if (num < 10) { return "0"+num; |