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

جاري التحميل ...

الأربعاء، 18 أكتوبر 2017

أضافة عداد تنازلي بالأيام والثواني خفيف وأنيق


 هل سبق  وكان لديك حدث مافي موقعك , واردت ان تضعه في عد تنازلي "countdownالآن يمكنك إنشاء عد تنازلي لذلك الحدث الخاص وجعل أعضاء موقعك يترقبون بشوق لة .

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



كود العداد


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>  
  <head>  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    <meta name="generator" content="PSPad editor, www.pspad.com">  
    <title>
    </title>
    <style>body{  text-align: center;  background: #00ECB9;   font-family: sans-serif;   font-weight: 100; } h1{   color: #396;   font-weight: 100;   font-size: 40px;   margin: 40px 0px 20px; } #clockdiv{  font-family: sans-serif;  color: #fff;  display: inline-block;  font-weight: 100;  text-align: center;  font-size: 30px; } #clockdiv > div{  padding: 10px;  border-radius: 3px;  background: #00BF96;  display: inline-block; } #clockdiv div > span{  padding: 15px;  border-radius: 3px;  background: #00816A;  display: inline-block; }.smalltext{  padding-top: 5px;  font-size: 16px; } 
    </style>             
  </head>  
  <body>     <h1>Countdown Clock</h1>
    <div id="clockdiv">  
      <div>    
        <span class="days">
        </span>    
        <div class="smalltext">Days
        </div>  
      </div>  
      <div>    
        <span class="hours">
        </span>    
        <div class="smalltext">Hours
        </div>  
      </div>  
      <div>    
        <span class="minutes">
        </span>    
        <div class="smalltext">Minutes
        </div>  
      </div>  
      <div>    
        <span class="seconds">
        </span>    
        <div class="smalltext">Seconds
        </div>  
      </div>    
    </div>  <br><br><br><br>
     <font size="2" color="#fff" face="lobster"> POWERED BY <a href="http://www.aden-web.ml" style="color:#fff;text-decoration:none">ADEN WEB</a></font>
<script type='text/javascript'>
 function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 12));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}
function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');
  function updateClock() {
    var t = getTimeRemaining(endtime);
    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }
  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
</script>  
  </body>
</html>


كلمات مفتاحية   عداد تنازليكود عداد تنازلي countdownhtml countdown


عن الكاتب :

عدن ويب مدونة إلكترونية متخصصة في مجال التقنية تهتم بنشر جديد المقالات والبرامج والألعاب على حد سواء وتقدم أيضا شروحات للبرامج وطرق الأختراق والبرمجة


التعليق بواسطة الفيسبوك




التعليق بواسطة بلوجر



يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
3للتبليغ عن رابط لا يعمل او مشكلة في الموقع من هنا الطلب
4لطلب خدمة التبادل الاعلاني المطور من هنا

إتصل بنا

الإسم الكريم البريد الإلكتروني مهم الرسالة مهم

شارك التدوينة

إذا أعجبك الموضوع قم بمشاركته مع أصدقائك

بضغطة زر تدعمنا وتشارك الفائدة

تم النسخ