يستخدم العد التنازلي في مواقع الويب في العروض التقديمية مثل تخفيضات رأس السنة ويستخدم بكثرة في تخفيضات الاستضافات وخاصة العروض التقديمية الخاصة بالمنتجات كما يمكننا استخدامه في اي مجال في الويب حسب الحاجة اليه
مثال حي
{{ 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@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> 
