Okay, so today I wanted to make a countdown timer for the 4.7 phase 2 banners in Genshin Impact. I had some free time and thought, “Why not?” It seemed like a fun little project.
First, I needed to figure out the exact release time. I checked the official announcements and some community posts to be absolutely sure. Gotta get that timing right, you know?
Next, I decided to use JavaScript. It’s pretty straightforward for this kind of thing, and I can easily embed it into a simple HTML page. No need for anything fancy.
I started by creating a basic HTML structure: just a simple <div> to hold the countdown. Then came the JavaScript part. I grabbed the current date and time using new Date().
The real work was calculating the difference between the current time and the release time. I set the release date and time, then subtracted the current date and time. This gave me the total time remaining in milliseconds.
Of course, milliseconds aren’t very user-friendly. So, I did some simple math to convert that into days, hours, minutes, and seconds. I used to get whole numbers, and the modulo operator () to get the remainders.
- Days: Total milliseconds divided by (1000 60 60 24).
- Hours: Remainder of milliseconds divided by (1000 60 60).
- Minutes: Remainder of milliseconds divided by (1000 60).
- Seconds: Remainder of milliseconds divided by 1000.
Finally output days, hours, minutes, and seconds, update every second.
I used setInterval() to update the countdown every second. Inside the interval function, I recalculated the time remaining and updated the text inside the <div>. It’s pretty satisfying to watch those numbers tick down!
It works! I mean, it’s not the prettiest thing in the world, but it accurately displays the time remaining until the 4.7 phase 2 banners. Mission accomplished, I guess!
