تُعدّ عدادات العد التنازلي طريقة رائعة لإضافة التفاعلية وإحساس بالإلحاح إلى تطبيقات الويب الخاصة بك. يقدم هذا الدليل نهجًا شاملاً لإنشاء عدادات عد تنازلي قابلة للتخصيص في جافا سكريبت، ويغطي كل شيء من التنفيذ الأساسي إلى الميزات المتقدمة.
محتويات
إنشاء عداد عد تنازلي أساسي
لنبدأ بعداد عد تنازلي بسيط يُحسب تنازليًا من 10 ثوانٍ. يستخدم هذا المثال HTML وJavaScript فقط، مما يجعله سهل الفهم والتنفيذ.
<!DOCTYPE html>
<html>
<head>
<title>عداد العد التنازلي</title>
</head>
<body>
<p>العد التنازلي: <span id="countdown">10</span> ثانية</p>
<script>
let timeLeft = 10;
const countdownElement = document.getElementById("countdown");
const timerInterval = setInterval(function() {
if (timeLeft <= 0) {
clearInterval(timerInterval);
countdownElement.textContent = "انتهى الوقت!";
} else {
countdownElement.textContent = timeLeft;
timeLeft--;
}
}, 1000);
</script>
</body>
</html>
يقوم هذا الكود أولاً بتعيين متغير timeLeft ابتدائي. ثم، يستخدم setInterval لتنفيذ دالة بشكل متكرر كل ثانية. تقوم هذه الدالة بتقليل timeLeft وتحديث العد التنازلي المعروض. بمجرد وصول timeLeft إلى 0، يتم مسح الفترة الزمنية، ويتم عرض “انتهى الوقت!”.
تخصيص عداد العد التنازلي الخاص بك
لنقم بتحسين عدادنا بإدخال مُعرّف من قِبل المستخدم ومخرجات مُنسّقة.
let startTime = parseInt(prompt("أدخل وقت العد التنازلي بالثواني:"), 10);
let timeLeft = startTime;
const countdownElement = document.getElementById("countdown");
const timerInterval = setInterval(function() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
if (timeLeft <= 0) {
clearInterval(timerInterval);
countdownElement.textContent = "انتهى الوقت!";
} else {
countdownElement.textContent = formattedTime;
timeLeft--;
}
}, 1000);
يُطالب الإصدار المُحسّن المستخدم بوقت البدء، ويتعامل مع الدقائق والثواني، ويُنسق المخرجات لتحسين القراءة (دقيقة:ثانية).
ميزات عداد العد التنازلي المتقدمة
لجعل المُؤقت أكثر تنوعًا، ضع في اعتبارك هذه التحسينات:
- معالجة الأحداث: تشغيل دالة عندما يصل المُؤقت إلى الصفر. يمكن استخدام هذا لإرسال نموذج، أو إعادة توجيه المستخدم، أو إجراء أي إجراء آخر.
- إمكانية الإيقاف المؤقت/الاستئناف: إضافة أزرار لإيقاف العد التنازلي مؤقتًا واستئنافه.
- التصميم باستخدام CSS: تحسين المظهر المرئي للمُؤقت باستخدام CSS مخصص.
من خلال الجمع بين هذه التقنيات، يمكنك إنشاء عدادات عد تنازلي عالية الوظائف وجذابة بصريًا لمشاريع الويب الخاصة بك.