Guten Abend ihr Lieben,
da ich totaler Anfänger in Sachen Javascript bin, bräuchte ich bitte Starthilfe bei dem Countdown timer, den ich gebastelt habe.
Das Problem ist, dass er Prima runterläuft, jedoch bei 00:00:00 nicht aufhört sondern in den Minusbereich geb
(
Kann mir da jemand helfen?
Der aktuelle Code :
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Contactform</title>
<!-- <link rel="stylesheet" href="css/style.css">-->
</head>
<body>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext"></div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext"></div>
</div>
<p class="noch">Noch</p>
<div>
<span class="minutes"></span>
<div class="smalltext"></div>
</div>
<p class="doppelpunkt">:</p>
<div>
<span class="seconds"></span>
<div class="smalltext"></div>
</div>
<p class="doppelpunkt">:</p>
<div>
<span class="mseconds"></span>
<div class="smalltext"></div>
</div>
<p class="doppelpunkt">!</p>
</div>
<script>
function getTimeRemaining(endtime) {
//var t = Date.parse(endtime) - Date.parse(new Date());
var t = Date.parse(endtime) - Date.now();
//var mseconds = Math.floor((t % 1000 / 10));
var seconds = Math.floor((t / 1000) % 60);
var mseconds = t;
var minutes = Math.floor((t / 1000 / 60) % 60);
return {
'total': t,
// 'days': days,
// 'hours': hours,
'minutes': minutes,
'seconds': seconds,
'mseconds': mseconds,
};
}
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');
var msecondsSpan = clock.querySelector('.mseconds');
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);
msecondsSpan.innerHTML = ('0' + t.mseconds).slice(-2);
//console.log(seconds)
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 100);
}
var deadline = new Date(Date.parse(new Date()) + 1 1 10 1 1000);
initializeClock('clockdiv', deadline);
</script>
<style>
body{
text-align: center;
font-family: 'open sans',sans-serif;
font-weight: 700;
}
h1{
color: #396;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}
#clockdiv{
font-family: 'open sans',sans-serif;
color: black;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
font-weight:700;
}
#clockdiv > div{
border-radius: 3px;
display: inline-block;
}
#clockdiv div > span{
border-radius: 3px;
display: inline-block;
}
.noch {
display:inline-block;
}
.doppelpunkt {
display:inline-block;
margin-left:-7px;
margin-right: -7px;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
.days {
display:none !important;
}
.hours {
display:none !important;
}
</style>
</body>
</html>
da ich totaler Anfänger in Sachen Javascript bin, bräuchte ich bitte Starthilfe bei dem Countdown timer, den ich gebastelt habe.
Das Problem ist, dass er Prima runterläuft, jedoch bei 00:00:00 nicht aufhört sondern in den Minusbereich geb
![Frown :( :(](https://cdn.jsdelivr.net/joypixels/assets/8.0/png/unicode/64/1f641.png)
Kann mir da jemand helfen?
Der aktuelle Code :
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Contactform</title>
<!-- <link rel="stylesheet" href="css/style.css">-->
</head>
<body>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext"></div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext"></div>
</div>
<p class="noch">Noch</p>
<div>
<span class="minutes"></span>
<div class="smalltext"></div>
</div>
<p class="doppelpunkt">:</p>
<div>
<span class="seconds"></span>
<div class="smalltext"></div>
</div>
<p class="doppelpunkt">:</p>
<div>
<span class="mseconds"></span>
<div class="smalltext"></div>
</div>
<p class="doppelpunkt">!</p>
</div>
<script>
function getTimeRemaining(endtime) {
//var t = Date.parse(endtime) - Date.parse(new Date());
var t = Date.parse(endtime) - Date.now();
//var mseconds = Math.floor((t % 1000 / 10));
var seconds = Math.floor((t / 1000) % 60);
var mseconds = t;
var minutes = Math.floor((t / 1000 / 60) % 60);
return {
'total': t,
// 'days': days,
// 'hours': hours,
'minutes': minutes,
'seconds': seconds,
'mseconds': mseconds,
};
}
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');
var msecondsSpan = clock.querySelector('.mseconds');
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);
msecondsSpan.innerHTML = ('0' + t.mseconds).slice(-2);
//console.log(seconds)
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 100);
}
var deadline = new Date(Date.parse(new Date()) + 1 1 10 1 1000);
initializeClock('clockdiv', deadline);
</script>
<style>
body{
text-align: center;
font-family: 'open sans',sans-serif;
font-weight: 700;
}
h1{
color: #396;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}
#clockdiv{
font-family: 'open sans',sans-serif;
color: black;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
font-weight:700;
}
#clockdiv > div{
border-radius: 3px;
display: inline-block;
}
#clockdiv div > span{
border-radius: 3px;
display: inline-block;
}
.noch {
display:inline-block;
}
.doppelpunkt {
display:inline-block;
margin-left:-7px;
margin-right: -7px;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
.days {
display:none !important;
}
.hours {
display:none !important;
}
</style>
</body>
</html>