كود انشاء معلومات التاريخ والوقت وبلد الزائر اعلى الموقع

في هذا المقال، سنتحدث عن كيفية إنشاء كود يقوم بعرض معلومات التاريخ والوقت وبلد الزائر في موقع الويب الخاص بك. سنستخدم لغات الويب الأساسية مثل HTML وCSS وJavaScript لتنفيذ ذلك.

سيتم استخدام الوقت الحالي من خلال خدمة الوقت عبر الإنترنت لضمان دقة المعلومات المعروضة وعدم اعتمادها على تاريخ ووقت جهاز المستخدم. سنقوم أيضًا بالحصول على معلومات بلد الزائر من خلال الاستعانة بخدمات الوقت عبر الإنترنت.

سيتم عرض المعلومات في شريط يظهر في الجزء العلوي من صفحتك، وسنقوم بتنسيق المظهر باستخدام CSS لتحقيق تصميم مرئي جذاب. ستتم تحديث المعلومات بشكل مستمر لضمان عرض الوقت والتاريخ الحاليين.

معلومات التاريخ والوقت وبلد الزائر تعتبر مهمة في العديد من التطبيقات والمواقع الإلكترونية، وستساعد في توفير تجربة مستخدم محسنة ومعلومات دقيقة للمستخدمين.

مشاهدة الكود :

لمشاهدة الكود انظر موقعكم المميز فى الأعلى موقع النصر التقنى نحن قمنا بتركيب الكود لأهميته فى موقعنا ( يفضل الدخول من جهاز كمبيوتر أو لاب توب لمشاهدة الكود كامل لأنه متجاوب) بمعنى اذا كنت تستخدم جوال شاشته صغيرة لان يعرض سوى الساعة واذا كان شاشة كمبيوتر سوف يعرض كل المعلومات التالية ( اليوم الميلادى - اليوم الهجرى - بلد الزائر - الساعة ).

للحصول على هذا الكود :

#topBar span {
    display: inline-block;
    margin: 0 10px;
    font-weight: bold;
  }
  
  @media screen and (max-width: 600px) {
    #topBar {
      font-size: 18px;
    }
  }
</style>

// التاريخ الميلادي
    var gregorianOptions = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
    var gregorianDateTime = currentTime.toLocaleString("ar-EG", gregorianOptions);

// التاريخ الهجري
    var hijriCalendar = new Intl.DateTimeFormat("ar-SA-u-ca-islamic", { weekday: "long", year: "numeric", month: "long", day: "numeric" });
    var hijriDateTime = hijriCalendar.format(currentTime);

// بلد الزائر
    var visitorCountry = Intl.DateTimeFormat().resolvedOptions().timeZone;

// عرض الساعة الآن والتاريخ الميلادي والتاريخ الهجري وبلد الزائر في الشريط
    var topBar = document.getElementById("topBar");
    topBar.innerHTML = `<span>الساعة الآن: ${currentTimeString}</span><span>التاريخ الميلادي: ${gregorianDateTime}</span><span>التاريخ الهجري: ${hijriDateTime}</span><span>بلد الزائر: ${visitorCountry}</span>`;
  }

getCurrentDateTime();
  setInterval(getCurrentDateTime, 1000);
</script>

مشاهدة الكود :

للحصول على هذا الكود :

مهندس محمد نصر