تطبيق دالة timeAgo: عرض الوقت المنقضي ديناميكياً في صفحات الويب

📚 مراجعة سريعة: هذا التطبيق العملي مبني على مفهوم برمجي أساسي. راجع الدرس النظري من هنا أولاً.


مقدمة افتتاحية: بعد أن فهمنا البنية الداخلية لدالة timeAgo وكيف تقوم بتحويل التواريخ المطلقة إلى عبارات ودية، حان الوقت لنضع هذا الفهم موضع التنفيذ. في هذا الدرس العملي، سنتعلم كيف ندمج هذه الدالة في صفحات الويب الخاصة بنا لعرض الوقت المنقضي ديناميكياً، مما يضفي حيوية وتفاعلية على المحتوى الخاص بك.

السيناريو العملي: عرض توقيت المقالات في مدونة

تخيل أن لديك مدونة وتريد عرض متى تم نشر كل مقال بطريقة جذابة. بدلاً من عرض التاريخ الكامل، سنستخدم دالتنا لعرض "منذ 5 ساعات" أو "قبل يومين".

الخطوة 1: إعداد هيكل HTML

سنبدأ بإنشاء هيكل HTML بسيط يمثل مقالة مع تاريخ نشرها. سنستخدم سمة مخصصة (data-timestamp) لتخزين التاريخ الفعلي، لكي نتمكن من الوصول إليه بسهولة من JavaScript.


<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تطبيق دالة timeAgo</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; color: #333; }
        .article-card {
            background-color: #fff;
            padding: 20px;
            margin-bottom: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        .article-card h3 { color: #0056b3; margin-top: 0; }
        .article-meta { font-size: 0.9em; color: #666; }
        .article-meta span { font-weight: bold; }
    </style>
</head>
<body>

    <h1 style="text-align: center; color: #0056b3;">أحدث المقالات</h1>

    <div class="article-card">
        <h3>مقدمة إلى JavaScript الحديثة</h3>
        <p>اكتشف أحدث الميزات والتحسينات في لغة JavaScript وكيف يمكنها تعزيز مشاريعك.</p>
        <div class="article-meta">
            نشرت: <span id="article1-time" data-timestamp="2023-10-26T10:00:00Z"></span>
        </div>
    </div>

    <div class="article-card">
        <h3>تحسين أداء مواقع الويب</h3>
        <p>تعلم أفضل الممارسات لزيادة سرعة تحميل صفحاتك وتحسين تجربة المستخدم.</p>
        <div class="article-meta">
            نشرت: <span id="article2-time" data-timestamp="2023-10-25T14:30:00Z"></span>
        </div>
    </div>

    <div class="article-card">
        <h3>أسرار تحسين محركات البحث (SEO)</h3>
        <p>دليل شامل لترتيب موقعك في صدارة نتائج البحث وجذب المزيد من الزوار.</p>
        <div class="article-meta">
            نشرت: <span id="article3-time" data-timestamp="2023-10-20T08:15:00Z"></span>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

الخطوة 2: دمج دالة timeAgo في JavaScript

الآن، لنقم بإنشاء ملف script.js وندمج فيه دالة timeAgo التي تعلمناها، ثم نستخدمها لتحديث محتوى عناصر <span> في صفحة HTML.


// دالة لتحويل التاريخ إلى صيغة (منذ كذا...)
function timeAgo(date) {
  const seconds = Math.floor((new Date() - date) / 1000);
  let interval = Math.floor(seconds / 31536000);

  if (interval >= 1) return interval + " سنة";
  interval = Math.floor(seconds / 2592000);
  if (interval >= 1) return interval + " شهر";
  interval = Math.floor(seconds / 86400);
  if (interval >= 1) return interval + " يوم";
  interval = Math.floor(seconds / 3600);
  if (interval >= 1) return interval + " ساعة";
  interval = Math.floor(seconds / 60);
  if (interval >= 1) return interval + " دقيقة";
  
  return Math.floor(seconds) + " ثانية";
}

// دالة لتحديث جميع عناصر الوقت في الصفحة
function updateAllTimeAgoElements() {
    // نختار جميع العناصر التي تحتوي على سمة data-timestamp
    const timeElements = document.querySelectorAll('[data-timestamp]');

    timeElements.forEach(element => {
        const timestamp = element.getAttribute('data-timestamp');
        const dateObject = new Date(timestamp); // نحول قيمة timestamp إلى كائن Date
        element.textContent = timeAgo(dateObject); // نستخدم دالة timeAgo لتحديث النص
    });
}

// عند تحميل الصفحة بالكامل، نقوم بتحديث عناصر الوقت
document.addEventListener('DOMContentLoaded', updateAllTimeAgoElements);

// (اختياري) لتحديث الوقت تلقائياً كل دقيقة
// setInterval(updateAllTimeAgoElements, 60 * 1000);

شرح الكود العملي:

  1. استدعاء الدالة timeAgo: قمنا بنسخ الدالة كما هي في ملف script.js.
  2. updateAllTimeAgoElements(): هذه الدالة الجديدة هي قلب التطبيق العملي.
    • document.querySelectorAll('[data-timestamp]'): نستخدم هذه الطريقة لاختيار جميع عناصر HTML التي تحتوي على السمة data-timestamp. هذه طريقة فعالة لاستهداف العناصر دون الحاجة لمعرفات فريدة لكل منها.
    • timeElements.forEach(element => { ... });: نمر على كل عنصر وجدناه.
    • const timestamp = element.getAttribute('data-timestamp');: نستخرج قيمة التاريخ المخزنة في السمة data-timestamp.
    • const dateObject = new Date(timestamp);: نحول هذه القيمة النصية إلى كائن Date في JavaScript، وهو التنسيق الذي تتوقعه دالة timeAgo.
    • element.textContent = timeAgo(dateObject);: هنا بيت القصيد! نمرر كائن التاريخ لدالة timeAgo، ونأخذ النتيجة (مثل "منذ 3 ساعات") ونضعها كنص داخل العنصر <span>.
  3. document.addEventListener('DOMContentLoaded', updateAllTimeAgoElements);: نضمن أن دالة التحديث لا تعمل إلا بعد أن يتم تحميل جميع عناصر HTML في الصفحة، لتجنب الأخطاء.
  4. (اختياري) setInterval(updateAllTimeAgoElements, 60 * 1000);: هذه السطر يعرض لك كيفية تحديث التوقيت تلقائياً كل دقيقة. يمكنك إلغاء التعليق عليه لتشاهد التغيير في الوقت الحقيقي (خاصة إذا كان الوقت المنقضي قصيراً).

الخلاصة

بمجرد حفظ ملفي index.html و script.js في نفس المجلد وفتح index.html في متصفحك، سترى التواريخ تتحول سحرياً إلى عبارات "منذ كذا...". هذه التقنية ليست فقط مفيدة لعرض أوقات النشر، بل يمكن تطبيقها في أي مكان تحتاج فيه إلى عرض فرق زمني بطريقة سهلة ومفهومة للمستخدم، مثل توقيت آخر تحديث، أو مدة بقاء عنصر ما على الشاشة، وغيرها الكثير.

مقالات ذات صلة قد تهمك: