العد التنازلي للوقت How To Create a Countdown Timer in vue - js
تعرف على كيفية إنشاء عداد للعد التنازلي باستخدام vue - js
مثال حي
{{ displaydays }}
الايام
{{ displayhours }}
الساعات
{{ displayminutes }}
الدقائق
{{ displayseconds }}
الثواني
ملاحظة
الكود كامل للمثال في الاعلى
<!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> 
