ما الجديد
مرحبا بك زائرنا الكريم في موقع شقاوي للتصميم والبرمجة اذا كانت هذه زيارتك اﻻولى فنتشرف بانضمامك لنا وان كنت احد كوكبة اعضائنا فأهلا بعودتك مرة أخرى

فكرة عمل New Year Countdown

هنا فكره بو محمد لو تعمل كود او هاك تقوم بعمل هذا الشي وحو يقوم بعمل عد تنازلي لاخر السنة الحالية تم مسح بعض الصور في الصورة المرفقة حفضاً على الخصوصية...

Binkaddas

عضو فعال
إنضم
8 أغسطس 2023
المشاركات
304
مستوى التفاعل
70
النقاط
28
هنا فكره بو محمد لو تعمل كود او هاك تقوم بعمل هذا الشي وحو يقوم بعمل عد تنازلي لاخر السنة الحالية

1735128563074.png

تم مسح بعض الصور في الصورة المرفقة حفضاً على الخصوصية للمواقع
 
حياك الله يا ابو محمد

باذن الله راح يتم عمل هالفكرة مع انها اتوقع ما تحتاج اضافة وانما كود جافاسكربت

بس ياليتك يا ابو محمد ضايف رابط الموقع لسهولة وسرعة تطبيق الفكرة
 
تفضلوا هذا هو الكود يمكنكم تشكيله بالطريقة التي تعجبكم وتناسبكم

HTML:
    <div id="countdown">جاري التحميل ...</div>

  <script>
    function updateCountdown() {
      const now = new Date();
      const nextYear = now.getFullYear() + 1;
      const newYearDate = new Date(`January 1, ${nextYear} 00:00:00`);
      const diff = newYearDate - now;

      if (diff <= 0) {
        document.getElementById('countdown').textContent = "Happy New Year!";
        clearInterval(intervalId);
        return;
      }

      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);

      document.getElementById('countdown').textContent =
        `${days} Days ${hours} Hours ${minutes} Minutes ${seconds} Seconds`;
    }

    const intervalId = setInterval(updateCountdown, 1000);
    updateCountdown();
  </script>
 
اتوقع الطريقه هنا غير

بحاول استخدم ChatGPT للتعديل

والله بو محمد احاول اعدل بعض الامور عن طريق الجات جي بي تي والله عجيب بصرحه عطه الفكره وهو ينفذ بصرحه

1735144145481.png



كما بالصورة التالية بو محمد لشعار Xenforo كان فيها فقط لمعان قمت بوضع الكود في ال chatGPT وقلت له اعمل زوم ان و اوت للصورة وعملي الكود
code2.gif
انصح باستخدامه والله
 
التعديل الأخير:
والله يا ابو محمد ال chatGPT انا استخدمه بشكل ما تتصوره ﻻنه يريحني في كتابة اﻻكواد كثير لكن فقط يحتاج له خبرة في طريقة طرح اﻻسئلة وهو راح يكمل الباقي


بس حركة اللوجو عجيبة ;) (y)
 
شوف بو محمد انا استخدمه في اضافة وتعديل على الكود ولكن لم يسبق لي ان طلبت منه عمل كود كامل متكامل واليوم اول مره ولكن ماضبط معاي ما اعرف السبب والخطوات اللي عملتها كالتالي

1- طلبت Make JavaScript Code for xenforo Script for New Year Countdown 2024

2- النتيجة كالتالي
1735155298353.png

كود:
<div id="countdown" style="text-align: center; font-size: 1.5em;"></div>

3-
1735155344486.png
كود:
#countdown div {
    display: inline-block;
    margin: 0 10px;
    text-align: center;
}
#countdown span {
    font-weight: bold;
    font-size: 2em;
    color: #ff5733;
}

1735155379205.png


4- كود الجافا سكربت
كود:
// JavaScript Code for New Year Countdown 2024
(function countdownToNewYear() {
    // Set the target date to New Year 2024
    const targetDate = new Date("January 1, 2024 00:00:00").getTime();

    // Function to update the countdown
    function updateCountdown() {
        const now = new Date().getTime(); // Get the current time
        const timeLeft = targetDate - now; // Calculate the difference

        if (timeLeft <= 0) {
            // If the countdown has ended
            document.getElementById("countdown").innerHTML = "🎉 Happy New Year 2024! 🎉";
            clearInterval(timerInterval); // Stop updating the timer
            return;
        }

        // Calculate days, hours, minutes, and seconds remaining
        const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

        // Display the countdown
        document.getElementById("countdown").innerHTML = `
            <div><span>${days}</span> Days</div>
            <div><span>${hours}</span> Hours</div>
            <div><span>${minutes}</span> Minutes</div>
            <div><span>${seconds}</span> Seconds</div>
        `;
    }

    // Update the countdown every second
    const timerInterval = setInterval(updateCountdown, 1000);

    // Initial call to display immediately
    updateCountdown();
})();

// Add this to your XenForo template with a container for the countdown
// Example HTML to include in your XenForo template:
// <div id="countdown" style="text-align: center; font-size: 1.5em;"></div>


ولكن ليش ما اشتغل ما اعرف والله
 
على العموم بو محمد احتمال اخليك تعمل هاك لي افضل ولكن بعطيك الفكره بالكامل لاني شف بعض الافكار جميلة

ومشكور
 
والله غيرت السنه وضبط

1735156004697.png

Steps:​

  1. Add this script to your XenForo template, widget, or custom page.
  2. Place the countdown in a prominent location on your XenForo site.

كود:
<!-- Add this code to a XenForo widget or template -->
<div id="countdown-container" style="text-align: center; font-size: 2em; padding: 20px;">
  <h2>Countdown to New Year 2025</h2>
  <div id="countdown">
    <span id="days">00</span> days
    <span id="hours">00</span> hours
    <span id="minutes">00</span> minutes
    <span id="seconds">00</span> seconds
  </div>
</div>

<script>
  // Countdown script for New Year 2025
  (function () {
    const targetDate = new Date('January 1, 2025 00:00:00').getTime();

    function updateCountdown() {
      const now = new Date().getTime();
      const timeLeft = targetDate - now;

      if (timeLeft < 0) {
        document.getElementById('countdown').innerHTML = '🎉 Happy New Year 2025! 🎉';
        return;
      }

      const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
      const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

      document.getElementById('days').textContent = days.toString().padStart(2, '0');
      document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
      document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
      document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
    }

    // Update countdown every second
    setInterval(updateCountdown, 1000);
    updateCountdown(); // Initial call to avoid delay
  })();
</script>
 
عودة
أعلى