كيفية إنشاء عداد تنازلي للوقت باستخدام vue3

يستخدم العد التنازلي في مواقع الويب في العروض التقديمية مثل تخفيضات رأس السنة ويستخدم بكثرة في تخفيضات الاستضافات وخاصة العروض التقديمية الخاصة بالمنتجات كما يمكننا استخدامه في اي مجال في الويب حسب الحاجة اليه

مثال حي

الايام

الساعات

الدقائق

الثواني

انتهى الوقت

الكود كامل للمثال في الاعلى مع الشرح داخل الكود

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" /> 
<!--   خاصية التجاوب مع جميع الاجهزة  --> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<!-- استدعاء مكتبة الخطوط من جوجل -->
<link href="https://fonts.googleapis.com/css2?family=Lemonada:wght@300&display=swap" rel="stylesheet">
<!-- استدعاء مكتبة فيو الإصدار الثالث -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>

<!--html countdown html-->  
<div id="roninge"> 
      <div class="container"> 
    
            <div  class=" section">
              <!--html تظهار الوقت بالعد التنازلي html-->  
              <div v-if="showtimer" class="countdown-cont">
                <div class="countdown-block">
                <!-- عرض متغير الأيام -->
                  <div class="countdown-digit">{{ displaydays }}</div>
                  <div class="countdown-label">الايام</div>
                </div>
                <div class="countdown-block">
                  <div data-js="countdown-hour" class="countdown-digit">
                  <!--عرض متغير الساعات -->
                    {{ displayhours }}
                  </div>
                  <div class="countdown-label"> الساعات</div>
                </div> 
                <div class="countdown-block">
                <!-- عرض متغير الدقائق -->
                  <div class="countdown-digit">{{ displayminutes }}</div>
                  <div class="countdown-label"> الدقائق</div>
                </div>
                <div class="countdown-block">
                <!-- عرض متغير الثواني -->
                  <div class="countdown-digit">{{ displayseconds }}</div>
                  <div class="countdown-label">الثواني</div>
                </div>
              </div>
              <!--html اظهار رسالة الوقت انتهى html-->  
              <h1 v-if="expired" class="countdown-endtext">
               انتهى الوقت
              </h1>
            </div> 
          </div>
  </div>
<!--script javascript script-->  
<script>
  const Counter = {  
  data() {
    return { 
    //اعلان المتغيرات التي ستحمل قيمة الاوقات
      expired: false,
      showtimer: false,
      displaydays: 0,
      displayhours: 0,
      displayminutes: 0,
      displayseconds: 0,
    };
  },
  mounted() {
// تشغييل دالة اظهار العد التنازلي
    this.showroninge();
  },
  methods: {   
//اضافة رقم صفر اذا كان الرقم فردي
    shack: function(num) {
      return num < 10 ? "0" + num : num;
    },

//دالة اظهار العد التنازلي
    showroninge: function() {
    
// تحديث العد التنازلي كل ثانية
    const timer = setInterval(() => {
        
// الحصول على الوقت منذ بدايته سنة 1970 الى يومنا بالملي ثانية
    const now = new Date().getTime();
        
// حدد التاريخ الذي نقوم بالعد التنازلي إليه 
   const end = new Date("2024-03-11").getTime();
        
// ابحث عن المسافة بين الآن وتاريخ العد التنازلي        
   const distance = end - now;
// إذا انتهى العد التنازلي ،  أوقف المؤقت واطبع رسالة انتهى الوقت      
    if (distance < 0) {
          clearInterval(timer);
          this.expired = true;
          this.showtimer = false;
          return;
        }

// حسابات الوقت للأيام والساعات والدقائق والثواني
    const days = Math.floor(distance / 864e5);
    const hours = Math.floor((distance % 864e5) / 36e5);
    const minutes = Math.floor((distance % 36e5) / 6e4);
    const seconds = Math.floor((distance % 6e4) / 1e3); 
      
 // ارسال القيم الى متغيرات الداتة وعرضها في المتصفح
    this.displayminutes = this.shack(minutes);
    this.displayseconds = this.shack(seconds);
    this.displayhours   = this.shack(hours);
    this.displaydays    = this.shack(days);
//اخفاء نص انتهى الوقت 
    this.expired        = false;
//اضهار بلوك الوقت 
    this.showtimer      = true;
      }, 1000);
    },
  },
 }
Vue.createApp(Counter).mount('#roninge');
</script>  
 <!--style css style-->
<style>
*{
   padding:0px;
   margin:0px;
   box-sizing:border-box;
   }
body{ 
 font-family: 'Lemonada', cursive; 
} 
.countdown-cont {
    display: grid;
    grid-template-columns: repeat(4 , 1fr);
    gap: 15px;
    text-align: center;
    max-width: 660px; 
    z-index:1;
    margin:auto;
    position:relative ;
  
}
.countdown-digit {
    font-size: xxx-large;
    background: #282c3473;
    border-radius: 6px;
    color: azure;
    margin-bottom: 5px;
    padding: 25px 10px;
    font-weight: bolder;
}
.countdown-label {    
    color:#fff;
}
.section{
  margin:3em 1.5em;
}
.container{ 
 background: linear-gradient(320deg, #42b983, #5077a0);
 padding: 25px 0px
    
}
.container img{
   width:100% ;
   height:auto;
}
@media (max-width:460px){
  .countdown-digit {
    font-size: x-large;  
    margin-bottom: 5px;
    padding: 15px 5px;
}
.section{
    margin:1em 1em;
}
}
</style>
</body>
</html>