Question

试图找到一个HTML / CSS代码，该代码可以显示具有两位数格式的倒计时（天，小时，分钟，秒），并且效果/动画可以在更改时向下滑动。每次更改都应使秒数下降，而所有较高的实例应在触发更改时（按分钟/小时/天的变化）下降，而秒数变化则不应下降。

试图从下面的资源中组合/适应两个代码，但是没有成功。有人可以协助完成超出要求的代码吗？有两个示例代码段。

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>

正下方的滑动效果可以朝相反方向进行优化。

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>

倒数两位倒计时动画

0 个答案: