From dc7eb8faaddedd2c90684404c90f622d3260d5f5 Mon Sep 17 00:00:00 2001 From: zlg Date: Wed, 25 Sep 2024 14:46:27 -0700 Subject: Add Persona 5 Phansite-like countdown style This *requires* custom CSS for best effect. --- make_timer.html | 1 + timer.js | 20 ++++++++++++++++---- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/make_timer.html b/make_timer.html index 3a6e178..1a2704c 100644 --- a/make_timer.html +++ b/make_timer.html @@ -21,6 +21,7 @@ Standard Countdown Progress Bar + Persona 5
diff --git a/timer.js b/timer.js index f625094..c947036 100644 --- a/timer.js +++ b/timer.js @@ -23,7 +23,18 @@ function setupCountdown() { break; case "bar": page.innerHTML = ` -
+
+
+
00
+
:
+
00
+
+ `; + break; + case "p5": + page.innerHTML = ` +
Are you ready to Enter Game Z?
+
00
:
@@ -39,7 +50,7 @@ function setupCountdown() { cd.style.fontFamily = params.get("f_family"); } cd.style.color = params.get("f_color"); - if (params.get("cdstyle") == "bar") { + if (params.get("cdstyle") == "bar" || params.get("cdstyle") == "p5") { document.getElementById("progress").style.backgroundColor = params.get("b_color"); } @@ -53,6 +64,7 @@ function tick() { cd.removeChild(cd.firstChild); } let end_msg = document.createElement("div"); + end_msg.id = "endmsg"; end_msg.textContent = params.get("end_text"); cd.appendChild(end_msg); window.clearInterval(timer_id); @@ -60,7 +72,7 @@ function tick() { } cur_seconds--; draw(); - if (params.get("cdstyle") == "bar") { + if (params.get("cdstyle") == "bar" || params.get("cdstyle") == "p5") { draw_bar(); } } @@ -71,7 +83,7 @@ function draw() { } function draw_bar() { - document.getElementById("progress").style.width = (((params.get("duration") - cur_seconds) / params.get("duration")) * 100) + "vw"; + document.getElementById("progress").style.width = (((params.get("duration") - cur_seconds) / params.get("duration")) * 100) + "%"; } function zero_pad(num) { -- cgit v1.2.3-54-g00ecf