Archiv-Modus von Basti1012 Lösungspage

In dem Beispiel zählt der Counter bis zu meinen 50 zigsten Geburtstag runter
Code

                                    
                                
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>


    <style>
* {
    box-sizing: border-box;
}

.pre-header {
     background-color: #1b1c1d;
     box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.1);

     text-align: center;
       justify-content: center;
     align-items: center; 
  display:flex;
}
.calendar_holder {
     display: flex;
}
.calendar-timer-holder__col-holder {
    display: flex;
    align-items: center; 
}



        .calendar-timer-holder-col-holder__col {
            display: flex;
     flex-direction:column;
            padding: 10px;
            color: white;
            border-radius: 6px;
            min-width: 70px;
            min-height: 70px;
            margin: 0 10px;
            font-size: 28px;
            font-weight: bold;
            letter-spacing: 1.4px;
      }
.explained {
            font-size: 12px;
            font-weight: normal; 
}
.triangle{
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;   
}
 .triangle-left{
        border-right: 15px solid #fb1f24;
        margin-left: 10px; 
}
.triangle-right {
        border-left: 15px solid #fb1f24;
        margin-right: 10px; 
}

         .close-wrapper {
            cursor: pointer;
            color: white;
            position: absolute;
            right: 10px;
            top: 8px;
        }
      #geb{
        font-size:50px;
      text-align:center;
      }
    </style>
    <script>
      var datum='2030-12-12 00:00:00';
        jQuery(function () {
             var salePreaheader = jQuery('.pre-header');
            var countdownBf = jQuery('.countdown');
            var ends = datum;//countdownBf.attr('data-ends-on');
            var endsDate = new Date(ends.replace(/-/g, "/"));
            var countDownDate = endsDate.getTime() - endsDate.getTimezoneOffset();//*60*1000;

            var x = setInterval(function() {
                var now = new Date().getTime();
                var distance = countDownDate - now;
                if (distance >= 0){
var days = ("00" + Math.floor(distance / (1000 * 60 * 60 * 24))).substr(-4);
         if(days<=9){
           var days = ("00" + Math.floor(distance / (1000 * 60 * 60 * 24))).substr(-1);    
         }
             if(days<=99){
           var days = ("00" + Math.floor(distance / (1000 * 60 * 60 * 24))).substr(-2);   
             }
                 if(days<=999){
           var days = ("00" + Math.floor(distance / (1000 * 60 * 60 * 24))).substr(-3);     
                 }
             if(days>999){
           var days = ("00" + Math.floor(distance / (1000 * 60 * 60 * 24))).substr(-4);   
           
                  }
var hours = ("00" + Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).substr(-2);
 var minutes = ("00" + Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).substr(-2);
 var seconds = ("00" + Math.floor((distance % (1000 * 60)) / 1000)).substr(-2);
                    countdownBf.find('.days .value').text(days);
                    countdownBf.find('.hours .value').text(hours);
                    countdownBf.find('.minutes .value').text(minutes);
                    countdownBf.find('.seconds .value').text(seconds);
                } else {
                    salePreaheader.hide();
                    countdownBf.find('.days .value').text('-');
                    countdownBf.find('.hours .value').text('-');
                    countdownBf.find('.minutes .value').text('-');
                    countdownBf.find('.seconds .value').text('-');
                }
            }, 1000);

            var closeBtn = jQuery('#sale-preheader-close');
            closeBtn.on('click', function() {
                salePreaheader.fadeOut();
            });

        });
 
    </script>
</head>
<body>

        <div class="pre-header">
           <div class="triangle triangle-right"></div>
      <div class="calendar_holder countdown" data-ends-on="2019-04-30 22:59:00">
      <div class="calendar-timer-holder__col-holder">
 <div class="calendar-timer-holder-col-holder__col days">
                                    <div class="value">00</div>
                                    <div class="explained">DAYS</div>
                                </div>
  <div class="calendar-timer-holder-col-holder__col hours">
                                    <div class="value">00</div>
            <div class="explained">HOURS</div>
                                </div>
                            </div>
  <div class="calendar-timer-holder__col-holder">
     <div class="calendar-timer-holder-col-holder__col minutes">
                                    <div class="value">00</div>
          <div class="explained">MINUTES</div>
                                </div>
   <div class="calendar-timer-holder-col-holder__col seconds">
                        <div class="value">00</div>
        <div class="explained">SECONDS</div>
                                </div>
                            </div>
                        </div>
               <div class="triangle triangle-left"></div>
  <div class="close-wrapper" id="sale-preheader-close">&times;</div>
     </div>
  <div id="geb">
    Mein fünfzigster geburstag<br>Basti1012</div>
</body>
</html>
basti1012.bplaced.net

Counter bis zum Datum x

Code
