基于JQuery倒计时最后一位连续滚动动画
本文关键在于最后一位的连续不断的变换动画,暂时没有考虑时、分、秒之间的统一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时</title>
<script src="../jquery.js"></script>
<style>
.djs{
position: absolute;//最后一位为绝对定位
top:-20px;
left:228px;
opacity:0;//最开始时重叠的最后一位全部透明度为0
-webkit-animation-timing-function: steps(1);
animation-timing-function: steps(1);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: eos_millseconds_ani;
animation-name: eos_millseconds_ani;
}
@keyframes eos_millseconds_ani{//动画为1秒内变化,但实际为0-0.1秒内就透明度从1到0
0%{opacity:1}
10%{opacity:0}
to{opacity:0}}}
.djs:nth-child(1){
animation-delay: 0s;//9-0这10个数每隔0.1s执行依次执行动画
}
.djs:nth-child(2){
animation-delay: .1s;
}
.djs:nth-child(3){
animation-delay: .2s;
}
.djs:nth-child(4){
animation-delay: .3s;
}
.djs:nth-child(5){
animation-delay: .4s;
}
.djs:nth-child(6){
animation-delay: .5s;
}
.djs:nth-child(7){
animation-delay: .6s;
}
.djs:nth-child(8){
animation-delay: .7s;
}
.djs:nth-child(9){
animation-delay: .8s;
}
.djs:nth-child(10){
animation-delay: .9s;
}
</style>
</head>
<body>
<div style="background-color: firebrick;color: white;width: 300px;"><span>距离活动结束仅剩:</span><span id='hour'>6</span><span>时</span><span id='min'>17</span><span>分</span><span id='second'>5</span><span>秒</span><span></span></div>
<div style="position: relative;color: white;">
<span class="djs">9</span>
<span class="djs">8</span>
<span class="djs">7</span>
<span class="djs">6</span>
<span class="djs">5</span>
<span class="djs">4</span>
<span class="djs">3</span>
<span class="djs">2</span>
<span class="djs">1</span>
<span class="djs">0</span>
</div>
</body>
<script>
$(document).ready(function(){
var Sec=document.getElementById('second')//秒表对应节点
var Min=document.getElementById('min')//分表对应节点
var Hour=document.getElementById('hour')
function second(){//每隔1秒变换依次秒表数据
setInterval(()=>{
Sec.innerHTML==='0' ?Sec.innerHTML=60:null;
Sec.innerHTML=Sec.innerHTML-1;
},1000)
}
function min(){//每隔1分钟变换依次分表数据
setInterval(()=>{
Min.innerHTML==='0' ?Min.innerHTML=60:null;
Min.innerHTML=Min.innerHTML-1;
},60000)
}
function hour(){
setInterval(()=>{
Hour.innerHTML==='0' ?Hour.innerHTML=60:null;
Hour.innerHTML=Hour.innerHTML-1;
},3600000)
}
second();
min();
hour();
})
</script>
</html>