از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
چگونه یک شمارش معکوس تاریخ با جاوا اسکریپت وانیلی بسازیم تایمر شمارش معکوس یک ساعت مجازی است که شمارش معکوس را از یک تاریخ خاص شروع می کند (یا متوقف می شود) تا شروع (یا پایان) یک رویداد را مشخص کند. آنها معمولا استفاده می شوند روی فرود page از یک وب سایت تجارت الکترونیک، وب سایت های در حال ساخت، صفحات رویدادها و مکان های مختلف دیگر. آنها معمولا استفاده می شوند …
سرفصلهای مطلب
معرفی
تایمر شمارش معکوس یک ساعت مجازی است که شمارش معکوس را از یک تاریخ خاص شروع می کند (یا متوقف می کند) تا شروع (یا پایان) یک رویداد را مشخص کند. آنها معمولا استفاده می شوند روی فرود page از یک وب سایت تجارت الکترونیک، وب سایت های در حال ساخت، صفحات رویدادها و مکان های مختلف دیگر.
آنها معمولاً برای تولدها، شمارش معکوس برای سال نو، تبلیغات و حتی ورزش استفاده می شوند. هدف اصلی تایمر شمارش معکوس است برای تشویق مردم به اقدام، قبل از اینکه خیلی دیر شود – مانند خرید اقلام یا خدمات، پیش بینی و ثبت نام برای یک رویداد و غیره روی.
در اصل، ما یک تاریخ مشخص را از قبل رزرو می کنیم. سپس با استفاده از جاوا اسکریپت می توانیم تاریخ جاری را از تاریخ مشخص شده کسر کنیم که هر ثانیه، دقیقه یا ساعت انجام می شود.
در این دست ها روی راهنما، ما یاد خواهیم گرفت که چگونه یک شمارنده شمارش معکوس ایجاد کنیم، یک برنامه قابل استفاده مجدد ایجاد کنیم که بتوان از آن استفاده کرد روی طیف گسترده ای از صفحات فرود. ما آن را به طور کامل در جاوا اسکریپت Vanilla می سازیم، و در پایان به روش انجام آن با کتابخانه های تاریخ جاوا اسکریپت مانند Moment.js نیز خواهیم پرداخت.
توجه داشته باشید: کد منبع برنامه را نیز می توان یافت روی GitHub.
با جاوا اسکریپت شمارش معکوس تاریخ بسازید
به شما توصیه می‌شود که روش ایجاد یک تایمر شمارش معکوس را فقط با استفاده از جاوا اسکریپت، به‌جای یک راه‌حل پیش‌بریده یا یک افزونه، بدانید، مگر اینکه نیاز به اضافه کردن عملکردهای خاص‌تری داشته باشید که بهتر است با کتابخانه به جای از ابتدا از آن مراقبت کنید.
از آنجایی که هیچ وابستگی ندارد، ساختن آن با جاوا اسکریپت Vanilla به شما امکان می دهد کد سبک وزن داشته باشید – وب سایت شما بار اضافی نخواهد داشت و نیازی به بارگذاری اسکریپت ها و شیوه نامه های خارجی ندارید. شما کنترل بیشتری خواهید داشت، به این معنی که می‌توانید تایمر را طوری طراحی کنید که دقیقاً همانطور که می‌خواهید رفتار کند و ظاهر شود، نه اینکه بخواهید یک افزونه را مطابق میل خود تغییر دهید.
شروع شدن
بیایید یک تاریخ هدف تعیین کنیم، که به عنوان تاریخ مورد نظر عمل می کند روز رویداد ما در حال ایجاد یک شمارش معکوس برای. شما همچنین می توانید به صورت پویا این تاریخ را بر اساس ایجاد کنید روی پارامترهایی مانند ایجاد شمارش معکوس برای کاربر تا آدرس ایمیل خود را تأیید کند.
به خاطر اختصار، تاریخ ثابتی را تنظیم می کنیم:
let interval;
const eventDay = new Date('03/03/2022');
توجه داشته باشید: این Date سازنده تاریخ ها را در قالب (MM/DD/YYYY) می گیرد. یک جای خالی هم داریم interval برای تکالیف بعدی
بیایید چند مقدار ثابت را نیز تنظیم کنیم. به طور معمول، کار با زمان (روی مقیاس ثانیه) در انجام می شود میلی ثانیهو اکثر متدها/فرمان‌ها را می‌پذیرند و برمی‌گردانند میلی ثانیه ارزش های.
مستقر روی که، اجازه دهید مدت زمان a را تعریف کنیم second، minute، hour و day، بنابراین در صورت نیاز می توانیم از آنها برای شمارش معکوس استفاده کنیم:
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
ایجاد یک تابع شمارش معکوس
حالا به گوشت منطق – تابع شمارش معکوس!
const countDownFn = () => {
// All logic goes in
}
بسته به روی هر چند وقت یک‌بار می‌خواهید تایمر به‌روزرسانی شود – هر ثانیه، دقیقه یا ساعت، عملکرد را به درستی فراخوانی می‌کنید فواصل:
everySecond = setInterval(countDownFn, second)
everyMinute = setInterval(countDownFn, minute)
everyHour = setInterval(countDownFn, hour)
حالا بیایید تاریخ فعلی را بدست آوریم و سپس آن را از تاریخ کم کنیم eventDay (در آینده) تا تفاوت بین آنها را بدانیم. سپس، بر اساس روی با این تفاوت، می دانیم چند روز، ساعت، دقیقه و ثانیه باقی مانده است:
let now = new Date();
let timeSpan = eventDay - now;
توجه داشته باشید: قرار دادن نمونه برای زمان فعلی مهم است (now) در تابع شمارش معکوس، زیرا “زمان فعلی” دائما تغییر می کند. وقتی تابع را برای به‌روزرسانی تایمر فراخوانی می‌کنیم، زمان به‌روز را دریافت می‌کند. دوم اینکه ما در حال استفاده هستیم let بجای const, از آنجایی که مقدار هر ثانیه تغییر می کند.
در نهایت، بیایید یک بررسی اضافه کنیم که آیا روز رویداد فرا رسیده است یا نه! هنگامی که به صفر رسید، دیگر نیازی به شمارش معکوس نیست. برای این، ما از یک استفاده خواهیم کرد if-else if بیانیه.
ابتدا، اجازه دهید if بیانیه ای برای بررسی اینکه آیا روز رویداد تعیین شده توسط کاربر قبلاً در گذشته است:
if (timeSpan <= -today) {
console.log("Unfortunately we have past the event day");
clearInterval(interval);
}
اگر timeSpan، نتیجه تفریق تاریخ و زمان جاری از eventDay کمتر یا برابر با هر زمان بعد از امروز است – منفی است، یا بهتر است بگوییم، در گذشته.
در نهایت – بیایید بررسی کنیم که آیا شمارش معکوس باید به پایان برسد یا خیر:
else if (timeSpan <= 0) {
console.log("Today is the event day");
clearInterval(interval);
return;
}
این clearInterval() تابع فاصله را پاک می کند، بنابراین این منطق فراخوانی نمی شود روی هر بازه (ثانیه، دقیقه، و غیره) دوباره.
در نهایت، می‌توانیم تعداد ثانیه‌ها، دقیقه‌ها، ساعت‌ها و روزهای باقی‌مانده را محاسبه کنیم، در صورتی که هر دو بررسی قبلی به آن ارزیابی شوند false:
else {
const days = Math.floor(timeSpan / day)
const hours = Math.floor((timeSpan % day) / hour)
const minutes = Math.floor((timeSpan % hour) / minute)
const seconds = Math.floor((timeSpan % minute) / second)
console.log(days + ":" + hours + ":" + minutes + ":" + seconds);
}
به جای چاپ به console – بیایید یک HTML ساده بسازیم page برای نمایش نتایج!
صفحه HTML
بیایید یک کوچک بسازیم page برای نمایش نتایج ما می خواهیم نوعی عنصر برای مثال داشته باشیم، روز، ساعت، دقیقه و دومین:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS Countdown Timer</title>
</head>
<body>
<div class="date-countdown-container">
<h2 id="day">0</h2>
<p>:</p>
<h2 id="hour">0</h2>
<p>:</p>
<h2 id="minute">0</h2>
<p>:</p>
<h2 id="second">0</h2>
</div>
<script src="./app.js"></script>
</body>
</html>
این app.js اسکریپت شامل تمام کدها از جمله کد است countDownFn(). اکنون می توانیم خروجی تابع را به not تغییر دهیم print ارزش ها به console، بلکه تغییر دهید day، hour، minute و second divs:
let dayField = document.getElementById('day');
let hourField = document.getElementById('hour');
let minuteField = document.getElementById('minute');
let secondField = document.getElementById('second');
// Constants and countDownFn
const countDownFn = () => {...}
// Set results
dayField.innerHTML = days;
hourField.innerHTML = hours;
minuteField.innerHTML = minutes;
secondField.innerHTML = seconds;
این باید به خوبی کار کند! با این حال، آن را واقعا سبک نیست. بیایید جلو برویم و مقداری CSS اضافه کنیم تا ظاهر آن بسیار زیباتر شود.
CSS – حالت دادن به تایمر شمارش معکوس
بیایید کمی سبک به تایمر اضافه کنیم! فونت بهتری اضافه می‌کنیم، رنگ پس‌زمینه را تغییر می‌دهیم، عناصر را متمرکز می‌کنیم و آنها را در ظروف سبک‌دار با سایه‌ها قرار می‌دهیم:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
height: 100vh;
width: 100%;
background: rgb(175, 90, 90);
display: flex;
justify-content: center;
align-items: center;
}
.date-countdown-container{
display: flex;
align-items: center;
gap: 30px;
}
.date-countdown-container h2{
background-color: #ddd;
padding: 20px;
border-radius: 10px;
border: 5px solid #fff;
-webkit-box-shadow: 8px 0px 0px 0px #DCD0C0, 0px 8px 0px 0px #B1938B, -8px 0px 0px 0px #4E4E56, 0px 0px 0px 8px #DA635D, 5px 5px 15px 5px rgba(0,0,0,0);
box-shadow: 8px 0px 0px 0px #DCD0C0, 0px 8px 0px 0px #B1938B, -8px 0px 0px 0px #4E4E56, 0px 0px 0px 8px #DA635D, 5px 5px 15px 5px rgba(0,0,0,0);
}
.date-countdown-container p{
background-color: #ddd;
padding: 2px;
border-radius: 10px;
border: 2px solid #fff;
-webkit-box-shadow: 8px 0px 0px 0px #DCD0C0, 0px 8px 0px 0px #B1938B, -8px 0px 0px 0px #4E4E56, 0px 0px 0px 8px #DA635D, 5px 5px 15px 5px rgba(0,0,0,0);
box-shadow: 8px 0px 0px 0px #DCD0C0, 0px 8px 0px 0px #B1938B, -8px 0px 0px 0px #4E4E56, 0px 0px 0px 8px #DA635D, 5px 5px 15px 5px rgba(0,0,0,0);
}
با انجام این کار – بیایید شیوه نامه را به آن اضافه کنیم <head> از فایل HTML:
<link rel="stylesheet" href="style.css"/>
اجرای برنامه
در نهایت – ما می توانیم برنامه را اجرا کنیم!
از Moment.js استفاده می کنید؟
اگر قبلاً از Moment.js استفاده می کنید – استفاده از آن برای این کار نیز ضرری ندارد. اگر برای چیز دیگری به آن نیاز ندارید، مطلقاً ضروری نیست که وابستگی داشته باشید، اما مفید است. diff() تابع:
const eventDay = moment("1402-06-03");
const now = moment();
const timeSpan = eventDay.diff(now);
به زبان ساده، این سه خط، متغیرهای اصلی هستند که به اجرای شمارش معکوس کمک می کنند، و آنها متغیرهایی هستند که شما می دهید یا فعال می کنید تا از برنامه، در این مثال از Moment.js، به دست آیند.
اگر بخواهید منطق مدیریت زمان کد اصلی را با این جایگزین کنید – شامل:
let dayField = document.getElementById('day');
let hourField = document.getElementById('hour');
let minuteField = document.getElementById('minute');
let secondField = document.getElementById('second');
let interval;
const eventDay = moment("1402-06-03");
// Convert to millisecond
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
const countDownFn = () => {
const today = moment();
const timeSpan = eventDay.diff(today);
if (timeSpan <= -today) {
console.log("Unfortunately we have past the event day");
clearInterval(interval);
return;
} else if (timeSpan <= 0) {
console.log("Today is the event day");
clearInterval(interval);
return;
} else {
const days = Math.floor(timeSpan / day);
const hours = Math.floor((timeSpan % day) / hour);
const minutes = Math.floor((timeSpan % hour) / minute);
const seconds = Math.floor((timeSpan % minute) / second);
// Set results
dayField.innerHTML = days;
hourField.innerHTML = hours;
minuteField.innerHTML = minutes;
secondField.innerHTML = seconds;
}
};
interval = setInterval(countDownFn, second);
نتیجه
در این دست ها روی راهنما – ما یاد گرفته ایم که چگونه تایمر شمارش معکوس خودمان را تنها با یک اسکریپت کوتاه جاوا اسکریپت بسازیم و یک HTML استایل دهی کنیم. page برای نمایش شمارش معکوس و همچنین روش استفاده از Moment.js برای انجام محاسبات زمان.
منتشر شده در 1403-01-12 00:06:03
