Counter bis zum Datum x
In dem Beispiel zählt der Counter bis zu meinen 50 zigsten Geburtstag runter
Der hier verwendete 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">×</div>
</div>
<div id="geb">
Mein fünfzigster geburstag<br>Basti1012</div>
</body>
</html>