الدرس 7: عداد تنازلي بسيط بإستخدام jQuery

مقدمة:

كثيراً ما نضطر إلى استخدام عداد تنازلي للموقع للإعلان عن حدث معين أو لوضع تاريخ معين لحدث أو تخفيضات في حال المتاجر الإلكترونية، لهذا سأشرح لكم عداد بسيط بإستخدام jQuery .

 

التركيب:

1- نقوم باستدعاء مكتبة “jQuery ” بالتأكيد إضافة إلى ملف “jquery.countdown.js”.

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript" src="js/jquery.countdown.js"></script>

 

2- نقوم باستدعاء ملف “style.css” الخاص بالصفحة بالطبع يمكن التعديل عليه ليتناسب مع شكل الموقع الخاص بكم.

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">

 

3- في ملف “HTML” نقوم بكتابة الكود التالي وكما هو واضح نحدد التاريخ بشكل بسيط من هنا، وهو التاريخ الذي سوف ينتهي عنده العداد التنازلي.

<script type="text/javascript">
$(function() {
   $('.countdown').countdown({});
});
</script>

<div class="container">
   <div class="countdown simple" data-date="June 7, 2018 13:00:00"></div>
</div>

 

هذه الإضافة متوافقة مع متصفحات Google Chrome و FireFox و Internet Explorer الإصدار السابع فما فوق إضافة إلى Edge .

 

لمشاهدة مثال أون لاين من هنا

لتحميل  القائمة من هنا

إذا واجهتكم أي مشاكل في التركيب أو أي استفسار أخر يمكنكم ترك تعليق هنا أو على الفيسبوك.

شارك برأيك