Countdown zwei Stellen mit Folie nach unten Animation

stimmen
0

Versucht, einen HTML / CSS-Code zu finden, die auf Änderung Countdown (Tage, Stunden, Minuten, Sekunden) mit zwei Ziffern Format und Wirkung / Animation visualisieren nach unten rutschen können. Sekunden sollte bei jeder Änderung nach unten rutschen, während alle höheren Instanzen in dem Moment nach unten rutschen sollten, wenn sie geändert werden ausgelöst werden (auf Minuten / Stunden / Tag ändern) und nicht auf, wenn Sekunden ändern.

Versuchte zu kombinieren / anzupassen zwei Codes von Ressourcen unten, aber ohne Erfolg. Kann jemand mit dem Code helfen, die oben genannten Anforderungen arbeiten können? Es gibt zwei Code-Schnipsel mit Beispielen verwendet.

var deadline = new Date(dec 31, 2025 15:37:25).getTime(); 

var x = setInterval(function() { 

var now = new Date().getTime(); 
var t = deadline - now; 
var days = Math.floor(t / (1000 * 60 * 60 * 24)); 

//var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
var hours = (0 +Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).slice(-2);

//var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); 
var minutes = (0 + Math.floor((t % (1000 * 60 * 60)) / (1000 * 60))).slice(-2);

//var seconds = Math.floor((t % (1000 * 60)) / 1000); 
var seconds =  (0 + Math.floor((t % (1000 * 60)) / 1000)).slice(-2);

document.getElementById(day).innerHTML =days ; 
document.getElementById(hour).innerHTML =hours; 
document.getElementById(minute).innerHTML = minutes; 
document.getElementById(second).innerHTML =seconds; 
if (t < 0) { 
		clearInterval(x); 
		document.getElementById(demo).innerHTML = TIME UP; 
		document.getElementById(day).innerHTML ='0'; 
		document.getElementById(hour).innerHTML ='0'; 
		document.getElementById(minute).innerHTML ='0' ; 
		document.getElementById(second).innerHTML = '0'; } 
}, 1000);
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; 
} 
<h1>Countdown Clock</h1> 
<div id=clockdiv> 
<div> 
	<span class=days id=day></span> 
	<div class=smalltext>Days</div> 
</div> 
<div> 
	<span class=hours id=hour></span> 
	<div class=smalltext>Hours</div> 
</div> 
<div> 
	<span class=minutes id=minute></span> 
	<div class=smalltext>Minutes</div> 
</div> 
<div> 
	<span class=seconds id=second></span> 
	<div class=smalltext>Seconds</div> 
</div> 
</div> 

<p id=demo></p> 

Schieben Effekt, gerade nach oben ist unten dargestellt, könnte für entgegengesetzte Richtung optimiert werden.

var numberSlot = document.getElementById('numberSlot');
var currentNumber = 0;

setInterval(function() {
  
  var nextNumber = currentNumber+1;
  if (nextNumber > 9) {
    nextNumber = 0;
  }
  
  numberSlot.innerHTML = 
     '<div class=number move-number-out>'+currentNumber+'</div>'+
     '<div class=number>'+(nextNumber)+'</div>';
     
  currentNumber = nextNumber;
  
}, 1000);
.number-slot {
  border: 2px solid black;
  font-family: Arial, sans-serif;
  font-size: 12em;
  line-height: 1.2em;
  overflow: hidden;
  height: 1.2em;
  text-align: center;
  width: 0.7em;
}
.number-slot .number {
  position: relative;
}

@keyframes moveNumberOut {
  0% {margin-top: 0em;}
  30% {margin-top: -1.2em;}
  100% {margin-top: -1.2em;}
}
.move-number-out {
    animation: moveNumberOut 1.5s;
}
<div class=number-slot id=numberSlot>
  <div class=number>
    0
  </div>
</div>

Veröffentlicht am 20/10/2018 um 12:27
quelle vom benutzer
In anderen Sprachen...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more