āļŠāļ§āļąāļŠāļāļĩāļāļĢāļąāļāļāļļāļāļāļ āļ§āļąāļāļāļĩāđāļāļĄāļāļ°āļāļēāļāļļāļāļāļāļĄāļēāļāļģ Countdown Timer āļāđāļ§āļĒ JavaScript āđāļāļ Step by Step āļāļąāļāļāļ°āļāļĢāļąāļ āđāļāļĒāļāļ°āļāļđāļāļāļķāļāļāļēāļĢāļŠāļĢāđāļēāļ JavaScript Date Objects āđāļāļ·āđāļāđāļŦāđāļāļļāļāļāļāļŠāļēāļĄāļēāļĢāļāđāļāļāļĢāļąāļāđāļāđāđāļāļāļēāļāļāđāļēāļāđ āđāļāđ āļŦāļēāļāļāļĢāđāļāļĄāļāļąāļāđāļĨāđāļ§āļāđāđāļāļĨāļļāļĒāļāļąāļāđāļĨāļĒ!!
āļāļāļāļ§āļēāļĄāļāļĩāđāļāļĩāļāļīāļĄāļāđ āđāļĨāļ° āđāļāļĒāđāļāļĢāđāđāļĄāļ·āđāļ 5 āđāļĄāļĐāļēāļĒāļ 2024
JavaScript Date Objects āļāļ·āļāļāļ°āđāļĢ?
JavaScript Date Objects āļāļ·āļ āļ§āļąāļāļāļļ (Objects) āļāļĩāđāđāļāđāđāļāļāļēāļĢāļāļģāļāļēāļāđāļāļĩāđāļĒāļ§āļāļąāļāļāđāļāļĄāļđāļĨāļāļāļ āļ§āļąāļāļāļĩāđāđāļĨāļ°āđāļ§āļĨāļē āđāļāļĒāļāļ°āļĄāļĩ Method āļāđāļēāļāđāđāļŦāđāđāļĢāļēāđāļāđāđāļāđāļāļēāļāļāļąāļāđāļāļāļēāļĢāļāļĩāđāļāļ°āļāđāļ§āļĒāļāļąāļāļāļēāļĢāļāđāļāļĄāļđāļĨāđāļāđāļāļĩāļāļāđāļ§āļĒ
āļāļēāļĢāļŠāļĢāđāļēāļāļ§āļąāļāļāļļ Date
āđāļĢāļēāļŠāļēāļĄāļēāļĢāļāļŠāļĢāđāļēāļ Date Object āđāļāđāđāļāļĒāđāļāđāļāļģāļŠāļąāđāļāļāļąāļāļāļĩāđ :
// āļŠāļĢāđāļēāļāļŠāļģāļŦāļĢāļąāļāļ§āļąāļāļāļĩāđāđāļĨāļ°āđāļ§āļĨāļēāļāļąāļāļāļļāļāļąāļāđāļāđāđāļāļĒāļāļĩāđāđāļĄāđāļāđāļāļāļĢāļ°āļāļļāļāļ°āđāļĢāđāļāļ§āļāđāļĨāđāļ
let now = new Date();
// āļŠāļēāļĄāļēāļĢāļāļĢāļ°āļāļļāļ§āļąāļāļāļĩāđāđāļĨāļ°āđāļ§āļĨāļēāļāļĩāđāļāđāļāļāļāļēāļĢāđāļāļ§āļāđāļĨāđāļāđāļāļ·āđāļāļāļģāļŦāļāļ āļ§āļąāļāļāļĩāđāđāļĨāļ°āđāļ§āļĨāļē āļāļĩāđāļāđāļāļāļāļēāļĢāđāļāđ
let currentDate = new Date('2024-04-01');
// āļāļąāļ§āļāļĒāđāļēāļāđāļāļāļēāļĢāļĢāļ°āļāļļ
new Date(year,month)
new Date(year,month,day)
new Date(year,month,day,hours)
new Date(year,month,day,hours,minutes)
new Date(year,month,day,hours,minutes,seconds)
new Date(year,month,day,hours,minutes,seconds,ms)āļāļķāļāļāđāļāļĄāļđāļĨāļāļēāļāļ§āļąāļāļāļļ Date
āđāļĄāļ·āđāļāđāļĢāļēāļŠāļĢāđāļēāļāļ§āļąāļāļāļļāļāļĩāđāđāļāđāđāļĨāđāļ§ āđāļĢāļēāļŠāļēāļĄāļēāļĢāļāļāļķāļāļāđāļāļĄāļđāļĨāđāļāđāļ āļāļĩ āļ§āļąāļ āđāļāļ·āļāļ āļāļąāđāļ§āđāļĄāļ āļāļēāļāļĩ āļ§āļīāļāļēāļāļĩ āļāļāļāļĄāļēāļāļēāļāļ§āļąāļāļāļļāđāļāđ āđāļāļĒāļāļēāļĢāđāļāđ Method āļāļąāļāļāļĩāđ :
let year = currentDate.getFullYear(); // āļāļķāļāļāļĩāļāļąāļāļāļļāļāļąāļ
let month = currentDate.getMonth(); // āļāļķāļāđāļāļ·āļāļāļāļąāļāļāļļāļāļąāļ (0 - 11)
let day = currentDate.getDate(); // āļāļķāļāļ§āļąāļāļāļĩāđāļāļąāļāļāļļāļāļąāļ (1 - 31)
let hours = currentDate.getHours(); // āļāļķāļāļāļąāđāļ§āđāļĄāļāļāļąāļāļāļļāļāļąāļ (0 - 23)
let minutes = currentDate.getMinutes(); // āļāļķāļāļāļēāļāļĩāļāļąāļāļāļļāļāļąāļ (0 - 59)
let seconds = currentDate.getSeconds(); // āļāļķāļāļ§āļīāļāļēāļāļĩāļāļąāļāļāļļāļāļąāļ (0 - 59)
āđāļĨāļ°āđāļĢāļēāļĒāļąāļāļŠāļēāļĄāļēāļĢāļāđāļāđ Method ‘getTime()’ āđāļāļ·āđāļāļāļķāļāļāđāļēāđāļ§āļĨāļēāđāļāļĢāļđāļāđāļāļāļāļāļ timestamp āļāļķāđāļāđāļāđāļāļāļģāļāļ§āļ milliseconds āļāļĩāđāļāđāļēāļāļĄāļēāļāļąāđāļāđāļāđāļ§āļąāļāļāļĩāđ 1 āļĄāļāļĢāļēāļāļĄ āļ.āļĻ. 1970 āļāļāļāļķāļāđāļ§āļĨāļēāļāļąāļāļāļļāļāļąāļāđāļāđāļāļĩāļāļāđāļ§āļĒ
let timestamp = currentDate.getTime(); āļāļēāļĢāđāļāđ timestamp āļāļĩāđāļĄāļąāļāļāļ°āđāļāđāļāļ§āļīāļāļĩāļāļĩāđāļŠāļ°āļāļ§āļāđāļāļāļēāļĢāļāļģāļāļēāļāļāļąāļāļāđāļāļĄāļđāļĨāđāļ§āļĨāļēāđāļ JavaScript āđāļāļĒāđāļāļāļēāļ°āđāļĄāļ·āđāļāļāđāļāļāļāļēāļĢāļāļģāļāļēāļĢāđāļāļĢāļĩāļĒāļāđāļāļĩāļĒāļāļŦāļĢāļ·āļāļāļģāļāļ§āļāļāđāļēāđāļ§āļĨāļēāđāļāļĢāļ°āļĒāļ°āđāļ§āļĨāļēāļĒāļēāļ§āđāļāļąāđāļāđāļāļ
āđāļĢāļīāđāļĄāļāļēāļĢāļāļģ Countdown Timer
āļŦāļĨāļąāļāļāļēāļāļāļĩāđāđāļĢāļēāđāļĢāļĩāļĒāļāļĢāļđāđāđāļĢāļ·āđāļāļāļāļēāļĢāļŠāļĢāđāļēāļāđāļĨāļ° Method āļāļāļ JavaScript Date Objects āļāļąāļāđāļĨāđāļ§āđāļĢāļēāļāđāļāļ°āļĄāļēāđāļĢāļīāđāļĄāļāđāļāļāļģ New Year Countdown Timer āļāļąāļāđāļĨāļĒ
āļŠāļĢāđāļēāļāļŦāļāđāļēāļŦāļĨāļąāļ index.html
āđāļāļāļąāļ§āļāļĒāđāļēāļāļāļĩāđāļāļĄāļāļ°āđāļāđ Tailwind CSS āđāļāļāļēāļĢāļŠāļĢāđāļēāļāļŦāļāđāļēāđāļ§āđāļāđāļāļ·āđāļāđāļŦāđāļāđāļēāļĒāļāđāļāļāļēāļĢāļāļāđāļāđāļāđāļĨāļ°āđāļāļīāđāļĄ JavaScript āđāļāđāļāļĨāđ index.html āđāļāļ·āđāļāļāļāļēāļāđāļāđāļāļāļąāļ§āļāļĒāđāļēāļāđāļŦāđāļāļļāļāļāļāđāļāđāđāļāđāļēāđāļāļāđāļēāļĒāļāļĩāđāļŠāļļāļāļāļ°āļāļĢāļąāļ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ðNew year Countdown to 2025</title>
<!-- āđāļāđ Tailwind āđāļāļ CND -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-[#0f172a] text-[#c6c8ce]">
<!-- Content -->
<div class="grid place-content-center justify-items-center gap-10 h-screen">
<h1 id="hny" class="text-8xl font-mono font-bold">New year Countdown to 2025</h1>
<div id="countdown" class="font-mono text-5xl">
<span id="days">0 </span>days <span id="min">0 </span>hours
<span id="hours">0 </span>min <span id="sec">0 </span>sec
</div>
</div>
<!-- Tag Script āļŠāļģāļŦāļĢāļąāļāđāļāļĩāļĒāļ JavaScript -->
<script></script>
</body>
</html>āđāļĢāļēāļāđāļāļ°āđāļāđāļŦāļāđāļēāđāļ§āđāļāđāļĢāļīāđāļĄāļāđāļāļĄāļēāđāļāļāļāļĩāđāđāļĨāļĒ
āđāļāļīāđāļĄāļāļąāļāļāđāļāļąāļāļāļēāļĢ Countdown Timer
āļŦāļĨāļąāļāļāļēāļāļāļĩāđāđāļĢāļēāđāļāđāļŦāļāđāļēāļŦāļĨāļąāļāļāļąāļāđāļĨāđāļ§ āđāļĢāļēāļāđāļāļ°āļĄāļēāđāļāļĩāļĒāļ JavaScript āđāļāļ·āđāļāđāļŦāđāļāļģāļāļēāļ Countdown āđāļāđāļāļĒāđāļēāļāļŠāļĄāļāļđāļĢāļāđ āđāļĢāļīāđāļĄāļāđāļāļāļēāļāļāļēāļĢāļāļģāļŦāļāļāļ§āļąāļāļāļĩāđāđāļĨāđāļ§āļĢāļąāļāļāđāļēāđāļ§āļĨāļēāđāļāļĢāļđāļāđāļāļāļāļāļ timestamp āļāļēāļāļāļąāđāļāđāļāđ setInterval() āđāļāļ·āđāļāđāļŦāđāļāļģāļāļēāļāļāđāļģāđāļāļļāļāđ 1 āļ§āļīāļāļēāļāļĩ
<script>
//āļāļģāļŦāļāļāđāļāđāļāļ§āļąāļāļāļĩāđ 1 āļĄāļāļĢāļēāļāļĄ 2025 āđāļ§āļĨāļē 00:00
const countDownDate = new Date("Jan 1, 2025 00:00:00").getTime();
//āļāļģāļŦāļāļāđāļŦāđāļāļģāļāļēāļāļāļąāļāļāđāļāļąāļāļāļļāļāđ 1 āļ§āļīāļāļēāļāļĩ āđāļāļĒāđāļāđ setInterval
const x = setInterval(() => {}, 1000);
</script>āļŦāļĨāļąāļāļāļēāļāļāļąāđāļāđāļĢāļēāļāđāļāļ°āđāļāļĩāļĒāļāļāļąāļāļāđāļāļąāļāļāļēāļĢāļāļģāļāļēāļāđāļ setInterval
<script>
let countDownDate = new Date("2025-01-01 00:00:00").getTime();
const x = setInterval(() => {
// āļĢāļąāļāļāđāļēāđāļ§āļĨāļē āļ āļāļąāļāļāļļāļāļąāļ
let now = new Date().getTime();
// āļŦāļēāđāļ§āļĨāļēāļāļĩāđāļŦāđāļēāļāļāļēāļāđāļ§āļĨāļēāļāļĩāđāļāļģāļŦāļāļ
let distance = countDownDate - now;
// āļāļģāļŦāļāļāļĄāļīāļĨāļīāļ§āļīāļāļēāļāļĩāđāļ 1 āļ§āļąāļ
const millisecondsPerDay = 86400000; // 1000 * 60 * 60 * 24
// āļāļģāļŦāļāļ 24 āļāļąāđāļ§āđāļĄāļ āđāļ 1 āļ§āļąāļ
const hoursPerDay = 24;
// āļāļģāļŦāļāļ 60 āļāļēāļāļĩ āđāļ 1 āļāļąāđāļ§āđāļĄāļ
const minutesPerHour = 60;
// āļāļģāļŦāļāļ 60 āļ§āļīāļāļēāļāļĩ āđāļ 1 āļāļēāļāļĩ
const secondsPerMinute = 60;
// āļāļģāļāļ§āļāđāļ§āļĨāļē
let daysRemaining = Math.floor(distance / millisecondsPerDay);
let hoursRemaining = Math.floor(
(distance % millisecondsPerDay) / (millisecondsPerDay / hoursPerDay)
);
let minutesRemaining = Math.floor(
(distance % (millisecondsPerDay / hoursPerDay)) /
(millisecondsPerDay / hoursPerDay / minutesPerHour)
);
let secondsRemaining = Math.floor(
(distance % (millisecondsPerDay / hoursPerDay / minutesPerHour)) /
(millisecondsPerDay /hoursPerDay / minutesPerHour / secondsPerMinute)
);
// āđāļāļĨāļĩāđāļĒāļāļāđāļēāđāļ HTML
document.getElementById("days").innerHTML = daysRemaining;
document.getElementById("hours").innerHTML = hoursRemaining;
document.getElementById("min").innerHTML = minutesRemaining;
document.getElementById("sec").innerHTML = secondsRemaining;
}, 1000);
</script>āđāļāļīāđāļĄāļāļēāļĢāļāļĢāļ§āļāļŠāļāļāđāļĄāļ·āđāļāļāļĢāļāļāļģāļŦāļāļāđāļĨāđāļ§āđāļŦāđāļŦāļĒāļļāļāļāļēāļĢāļāļģāļāļēāļ
if (distance < 1) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "";
document.getElementById("hny").innerHTML = "Happy New Year ð";
}āļāļĨāļĨāļąāļāļāđāļŦāļāđāļēāđāļ§āđāļ
āļāļāļ°āļāļĩāđāļāļģāļāļēāļ
āđāļĄāļ·āđāļāļāļģāļāļēāļāđāļŠāļĢāđāļāļŠāļīāđāļ
Code āļāļāļąāļāļŠāļĄāļāļđāļĢāļāđ :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ðNew year Countdown to 2025</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-[#0f172a] text-[#c6c8ce]">
<div class="grid place-content-center justify-items-center gap-10 h-screen">
<h1 id="hny" class="text-8xl font-mono font-bold">
New year Countdown to 2025
</h1>
<div id="countdown" class="font-mono text-5xl">
<span id="days">0 </span> days <span id="hours">0 </span> hours
<span id="min">0 </span> min <span id="sec">0 </span> sec
</div>
</div>
<script>
let countDownDate = new Date("2025-01-01 00:00").getTime();
const x = setInterval(() => {
let now = new Date().getTime();
let distance = countDownDate - now;
const millisecondsPerDay = 86400000;
const hoursPerDay = 24;
const minutesPerHour = 60;
const secondsPerMinute = 60;
let daysRemaining = Math.floor(distance / millisecondsPerDay);
let hoursRemaining = Math.floor((distance % millisecondsPerDay) /
(millisecondsPerDay / hoursPerDay)
);
let minutesRemaining = Math.floor(
(distance % (millisecondsPerDay / hoursPerDay)) /
(millisecondsPerDay / hoursPerDay / minutesPerHour)
);
let secondsRemaining = Math.floor(
(distance % (millisecondsPerDay / hoursPerDay / minutesPerHour)) /
(millisecondsPerDay / hoursPerDay / minutesPerHour / secondsPerMinute)
);
document.getElementById("days").innerHTML = daysRemaining;
document.getElementById("hours").innerHTML = hoursRemaining;
document.getElementById("min").innerHTML = minutesRemaining;
document.getElementById("sec").innerHTML = secondsRemaining;
if (distance < 1) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "";
document.getElementById("hny").innerHTML = "Happy New Year ð";
}
}, 1000);
</script>
</body>
</html>
āļŠāļĢāļļāļ
āđāļāđāļāļāļĒāđāļēāļāđāļĢāļāļąāļāļāđāļēāļāļāļĢāļąāļ! āļāļēāļĢāļāļģ Countdown Timer āđāļ JavaScript āļāļąāđāļāđāļāđāļāđāļĢāļ·āđāļāļāļāļĩāđāđāļĄāđāļĒāļēāļāđāļĨāļĒāđāļĨāļ°āļŠāļēāļĄāļēāļĢāļāļāļģāđāļāđāđāļāļĒāđāļāļĢāļāđāļāļēāļĄāļāļĩāđāļĄāļĩāļāļ§āļēāļĄāļĢāļđāđāļāļ·āđāļāļāļēāļāđāļāļāļēāļĢāđāļāļĩāļĒāļāđāļāđāļāļāđāļēāļāđāļĨāđāļāļāđāļāļĒ āļāđāļ§āļĒāđāļāļĢāļ·āđāļāļāļĄāļ·āļāđāļĨāļ°āļāļ§āļēāļĄāļŠāļēāļĄāļēāļĢāļāļāļĩāđāļĄāļĩāļāļĒāļđāđāđāļāļ āļēāļĐāļē JavaScript āđāļĢāļēāļŠāļēāļĄāļēāļĢāļāļŠāļĢāđāļēāļ Countdown Timer āļāļĩāđāļŠāļ§āļĒāļāļēāļĄāđāļĨāļ°āļĄāļĩāļāļĢāļ°āđāļĒāļāļāđāđāļāđāļāļĒāđāļēāļāļāđāļēāļĒāļāļēāļĒ āđāļĨāļ°āļŦāļ§āļąāļāļ§āđāļēāļāļāļāļ§āļēāļĄāļāļĩāđāļāļ°āđāļāđāļāļāļĢāļ°āđāļĒāļāļāđāļāđāļāļāļļāļāļāļāļāļ°āļāļĢāļąāļ
āļāđāļēāļāļāļīāļ
- JavaScript Date Objects āļŠāļ·āļāļāđāļāđāļĄāļ·āđāļ 1 āđāļĄāļĐāļēāļĒāļ 2567
āļāļēāļ: https://www.w3schools.com/js/js_dates.asp - Method āļāđāļēāļāđāđāļ JavaScript Date Objects āļŠāļ·āļāļāđāļāđāļĄāļ·āđāļ 1 āđāļĄāļĐāļēāļĒāļ 2567
āļāļēāļ: https://www.w3schools.com/jsref/jsref_obj_date.asp - CDN Tailwind CSS āļŠāļ·āļāļāđāļāđāļĄāļ·āđāļ 1 āđāļĄāļĐāļēāļĒāļ 2567
āļāļēāļ: https://tailwindcss.com/docs/installation/play-cdn
