From 0f06c4ac974a388320da4a014a77ef26566b27f0 Mon Sep 17 00:00:00 2001 From: zlg Date: Fri, 16 Aug 2024 07:24:17 -0700 Subject: Add progress bar countdown style --- make_timer.html | 9 +++++++++ timer.css | 12 +++++++++++- timer.html | 5 ----- timer.js | 36 +++++++++++++++++++++++++++++++++++- 4 files changed, 55 insertions(+), 7 deletions(-) diff --git a/make_timer.html b/make_timer.html index d625767..3a6e178 100644 --- a/make_timer.html +++ b/make_timer.html @@ -17,6 +17,11 @@
+
+ + Standard Countdown + Progress Bar +
@@ -33,6 +38,10 @@
+
+ + +
diff --git a/timer.css b/timer.css index 253d895..2285a38 100644 --- a/timer.css +++ b/timer.css @@ -9,7 +9,7 @@ body { } #page { - font-size: 85vh; + font-size: 30vh; /* other font sizes, depending on CEF support */ /* font-size: min(30vmin, max(90vh, calc(100vw * 0.40))); */ /* font-size: clamp(10vmin, 90vh, calc(100vw * 0.40)); */ @@ -28,3 +28,13 @@ body { height: 100%; margin: 0 auto; } + +#bar { + height: 20vh; +} + +#progress { + background: #000; + width: 0%; + height: inherit; +} diff --git a/timer.html b/timer.html index 6df6a65..3c812ad 100644 --- a/timer.html +++ b/timer.html @@ -21,11 +21,6 @@ body elements. -->
-
-
00
-
:
-
00
-
diff --git a/timer.js b/timer.js index e2e9380..f625094 100644 --- a/timer.js +++ b/timer.js @@ -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 = ` +
+
00
+
:
+
00
+
+ `; + break; + case "bar": + page.innerHTML = ` +
+
+
00
+
:
+
00
+
+ `; + 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; -- cgit v1.2.3-54-g00ecf