基于JQuery倒计时最后一位连续滚动动画

最新推荐文章于 2023-05-03 10:50:52 发布

Aichiwawacai

最新推荐文章于 2023-05-03 10:50:52 发布

阅读量331

点赞数

文章标签： javascript css html jquery

本文链接：https://blog.csdn.net/Aichiwawacai/article/details/103939473

版权

基于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>

Aichiwawacai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于JQuery倒计时最后一位连续滚动动画

基于JQuery倒计时最后一位连续滚动动画本文关键在于最后一位的连续不断的变换动画，暂时没有考虑时、分、秒之间的统一<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>倒计时</title> <script src="../jquer...
复制链接

扫一扫