Counter mit inputfelder
Counter, der bis Datum x zählt. Counter kann jederzeit geändert werden durch die Input-Felder
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
}
body{
height:100vh;
}
nav{
height:200px;
border:1px solid white;
background:black;
color:white;
}
nav span{
display:flex;
margin:3px 0;
border:1px solid white;
width:90%;
margin:10px auto;
padding:3px;
border-radius:5px;
}
input{
width:calc(100vw / 6);
}
input:focus{
border:2px solid green;
}
div{
width:calc(100vw / 6);
margin-left:14px;
display:inline-block;
}
nav label{
font-weight:700;
text-align:center;
width:150px;
display:block;
margin-left:calc(100vw / 2 - 75px);
font-size:25px;
border-bottom:3px solid white;
}
main{
height:calc(100vh - 200px - 50px - 6px);
border:1px solid white;
}
main h1,main #countdown{
text-align:center;
}
footer{
height:50px;
background:black;
border:1px solid white;
color:white;
position:relative;
bottom:0;
}
</style>
<body>
<nav>
<label>Datum </label>
<span>
<div>Jahr :</div>
<input type="number" id="jahr" max="2999" value="2220">
<div>Monat :</div>
<input type="number" id="monat" max="12" value="0">
<div>Tag :</div>
<input type="number" id="tag" max="31" value="0">
</span>
<br>
<label> Zeit</label>
<span>
<div> Stunde : </div>
<input max="23" type="number" id="Stunde" value="0">
<div>Minuten:</div>
<input max="59" type="number" id="minute" value="0">
<div>Sekunden: </div>
<input max="59" type="number" id="sekunden" value="0">
</span>
</nav>
<main>
<h1>Countdown Jahr <span id="jahr2"></span></h1>
<h5 id="countdown">Countdown</h5>
</main>
<footer>
<h6>
© 2010 -
<script>
document.write(new Date().getFullYear())
</script> by basti1012
</h6>
</footer>
</body>
<script>
inputs_einstellen()
function inputs_einstellen(){
var inp1=document.querySelectorAll('input');
inp1.forEach((i)=>{
var heute = new Date();
var jah = heute.getFullYear();
var mon = heute.getMonth()+1;
var day = heute.getDate();
var StundenZahl = heute.getHours();
var MinutenZahl = heute.getMinutes();
var SekundenZahl = heute.getSeconds();
inp1[0].value=jah;
inp1[1].value=mon;
inp1[2].value=day;
inp1[3].value=StundenZahl;
inp1[4].value=MinutenZahl;
inp1[5].value=SekundenZahl;
inp1[0].min=jah;
inp1[1].min=mon;
inp1[2].min=day;
inp1[3].min=StundenZahl;
inp1[4].min=MinutenZahl;
inp1[5].min=SekundenZahl;
});
}
var timer;
var inp=document.querySelectorAll('input');
inp.forEach((i)=>{
i.addEventListener('change',function(){
clearInterval(timer);
weiter(i,inp);
})
})
function weiter(a,inp){
var jahr = inp[0].value,
monat = inp[1].value,
tag = inp[2].value,
stunde = inp[3].value,
minute = inp[4].value,
sekunde = inp[5].value;
document.getElementById('jahr2').innerHTML=jahr;
var zielDatum = new Date(jahr, monat-1 , tag, stunde, minute, sekunde);
timer=setInterval(function(){
countdown(zielDatum);
}, 1000);
}
function countdown(zielDatum) {
var startDatum = new Date();
///console.log(startDatum,zielDatum);
var jahre1 = 0, monate1 = 0, tage1 = 0, stunden1 = 0, minuten1 = 0, sekunden1 = 0;
while (startDatum < zielDatum) {
jahre1++;
startDatum.setFullYear(startDatum.getFullYear() + 1);
}
startDatum.setFullYear(startDatum.getFullYear() - 1);
jahre1--;
while (startDatum < zielDatum) {
monate1++;
startDatum.setMonth(startDatum.getMonth() + 1);
}
startDatum.setMonth(startDatum.getMonth() - 1);
monate1--;
while (startDatum.getTime() + (24 * 60 * 60 * 1000) < zielDatum) {
tage1++;
startDatum.setTime(startDatum.getTime() + (24 * 60 * 60 * 1000));
}
stunden1 = Math.floor((zielDatum - startDatum) / (60 * 60 * 1000));
startDatum.setTime(startDatum.getTime() + stunden1 * 60 * 60 * 1000);
minuten1 = Math.floor((zielDatum - startDatum) / (60 * 1000));
startDatum.setTime(startDatum.getTime() + minuten1 * 60 * 1000);
sekunden1 = Math.floor((zielDatum - startDatum) / 1000);
if(jahre1 !== 1){
jahre =jahre1+"Jahre,";
}else{
jahre = jahre1 + " Jahr,";
}
if(monate1 !== 1){
monate = monate1 + " Monate,";
}else{
monate = monate1 + " Monat,";
}
if(tage1 !== 1){
tage = tage1 + " Tage,";
}else{
tage = tage1 + " Tag,";
}
if(stunden1 !== 1){
stunden = stunden1 + " Stunden,";
}else{
stunden = stunden1 + " Stunde,";
}
if(minuten1 !== 1){
minuten = minuten1 + " Minuten und ";
}else{
minuten = minuten1 + " Minute und ";
}
if(sekunden1 < 10) {
sekunden = "0" + sekunden1;
}
if(sekunden1 !== 1){
sekunden = sekunden1 + " Sekunden";
}else{
sekunden = sekunden1 + " Sekunde";
}
document.getElementById("countdown").innerHTML =jahre + monate + tage + stunden + minuten + sekunden;
if(jahre1==0){
if(monate1==0){
if(tage1==0){
if(monate1==0){
if(tage1==0){
if(sekunden1==0){
console.log('win')
clearInterval(timer);
}else{}
}else{}
}else{}
}else{}
}else{}
}else{}
//}
//else {
// document.getElementById("countdown").innerHTML =
// "Frohes neues Jahr! Viel Glück und Gesundheit!";
// }
}
</script>
</body>