تعرف على كيفية إنشاء عداد للعد التنازلي للوقت باستخدام vue - js Countdown Timer

العد التنازلي للوقت How To Create a Countdown Timer in vue - js

تعرف على كيفية إنشاء عداد للعد التنازلي باستخدام vue - js

مثال حي

الايام

الساعات

الدقائق

الثواني

انتهى الوقت

ملاحظة

الكود كامل للمثال في الاعلى

<!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@next"></script>
</head>
<body>
 <!--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, #16222A, #3A6073);
   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>
<!--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-->  
              <span v-if="expired" class="countdown-endtext">
               انتهى الوقت
              </span>
            </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("2023-01-10").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>  
</body>
</html>