Okay, so I’ve been HYPED for Boothill in Honkai: Star Rail. I mean, who isn’t? The cowboy aesthetic? Yes, please! So, naturally, I needed a countdown timer for his banner. I looked around, but couldn’t find exactly what I wanted, something simple and clean. So I thought, “Fine, I’ll do it myself!”
First, I needed to figure out the date. Luckily, the livestream pretty much confirmed when his banner would drop – it is May 29, 2024 (UTC+8). Phew, one less thing to worry about.
Then came the fun part – actually making the thing. I’m no coding expert, my skils are very poor, but I can cobble together some basic HTML and JavaScript. I started with a simple HTML structure:
- A div to hold the whole thing. You know, just a container.
- A heading to display “Boothill Banner Countdown”. Gotta have that title.
- Individual divs for days, hours, minutes, and seconds. Each with a unique ID so I can update them later.
That was the easy part. Now for the JavaScript. Here’s what I did, step-by-step (more like stumble-by-stumble):
- I set the `countDownDate` to May 29, 2024. Made sure to get the time zone right!
- Next a timer using `setInterval`. This thing runs every second, which is exactly what we want for a countdown.
- Inside the interval, I calculated the difference between the target banner time (UTC+8) and now. This gave me the total time remaining in milliseconds.
- Then, I did some math to convert those milliseconds into days, hours, minutes, and seconds. Let me tell you, there was a lot of Googling involved. Lots of trial and error.
- Finally, I updated the content of those HTML divs I mentioned earlier with the calculated values. Boom! Numbers on the screen!
The Final Result (so far)
It works! I’ve got a basic countdown timer ticking away. It’s not the prettiest thing in the world – I still need to work on that styling, and it doesn’t auto-update, but it shows the time remaining until Boothill’s banner. The design and the JavaScript code still need to be polished. For now, I’m just happy I got the core functionality working. It took me much more time to figure out the time zone conversion, and that gave me a serious headache!
Next, I’ll probably add some cool background images, I wanna make this look a bit more…cowboy-ish. Maybe some animations? We’ll see. But for now, mission accomplished! At least on the basic functionality front. I’ll share when I update my design.
