记分牌时钟

最新推荐文章于 2022-08-05 10:03:36 发布

转载最新推荐文章于 2022-08-05 10:03:36 发布 · 662 阅读

文章标签：

#JavaScript #记分牌时钟

web前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的记分牌时钟效果。通过动态更新时间显示，并利用CSS3的3D转换特性，实现了数字翻转的效果。这种时钟适合用于比赛计时或其他需要显示实时时间的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>记分牌时钟</title>
	<style>
		body{background:#ddd;}
		#wrap{margin-top:150px;text-align:center;}
		.box,.box span,.box div{
			width:70px;
			height:120px;
			display:block;
			line-height:120px;
			font-size:100px;
			text-shadow:0 0 5px #999;
			font-family:'Helvetica';
		}
		.box span{
			background-image:-webkit-linear-gradient(top,#fefefe 0%,#E0E0E0 100%);
			background-image:-moz-linear-gradient(top,#fefefe 0%,#E0E0E0 100%);
			background-image:-ms-linear-gradient(top,#fefefe 0%,#E0E0E0 100%);
			background-image:-o-linear-gradient(top,#fefefe 0%,#E0E0E0 100%);
			border-radius:10px;
			box-shadow:0 2px 5px #666,0 -2px 5px #666;
		}
		.box{
			display:inline-block;
			border-radius:10px;
			position:relative;
			perspective:400px;
			margin:5px;
		}
		.box .top{
			position:absolute;
			height:50%;
			overflow:hidden;
			left:0;
			top:0;
			box-shadow:0 -2px 5px #666;border-radius:10px 10px 0 0;
			-webkit-transition:all 0.7s;
			-webkit-transform-origin:0 100%;
			-webkit-transform-style:preserve-3d;

			-moz-transition:all 0.7s;
			-moz-transform-origin:0 100%;
			-moz-transform-style:preserve-3d;

			-ms-transition:all 0.7s;
			-ms-transform-origin:0 100%;
			-ms-transform-style:preserve-3d;

			-o-transition:all 0.7s;
			-o-transform-origin:0 100%;
			-o-transform-style:preserve-3d;
		}
		.box .move{
			overflow:hidden;
			position:absolute;
			bottom:0;
			left:0;
			height:50%;
			perspective:400px;
		}
		.box .move div{
			position:absolute;
			left:0;
			bottom:0;
			height:100%;
		}
		.box .move .back span,.box .move .front span{
			position:absolute;
			left:0;
			bottom:0;
			overflow:hidden;
		}
		.box .move .back{
			border-radius:0 0 10px 10px;
			box-shadow:0 2px 5px #666;
			z-index:2;
			overflow:hidden;
			-webkit-transition:all 0.7s;
			-webkit-transform:rotateX(-180deg);
			-webkit-transform-origin:0 0;
			-webkit-transform-style:preserve-3d;

			-moz-transition:all 0.7s;
			-moz-transform:rotateX(180deg);
			-moz-transform-origin:0 0;
			-moz-transform-style:preserve-3d;

			-ms-transition:all 0.7s;
			-ms-transform:rotateX(180deg);
			-ms-transform-origin:0 0;
			-ms-transform-style:preserve-3d;

			-o-transition:all 0.7s;
			-o-transform:rotateX(180deg);
			-o-transform-origin:0 0;
			-o-transform-style:preserve-3d;
		}
		#wrap .box.active .top{
			-webkit-transform:translateZ(2px) rotateX(180deg);
			-moz-transform:translateZ(2px) rotateX(180deg);
			-ms-transform:translateZ(2px) rotateX(180deg);
			-o-transform:translateZ(2px) rotateX(180deg);
		}
		#wrap .box.active .back{
			-webkit-transform:translateZ(2px) rotateX(0deg);
			-moz-transform:translateZ(2px) rotateX(0deg);
			-ms-transform:translateZ(2px) rotateX(0deg);
			-o-transform:translateZ(2px) rotateX(0deg);
		}
	</style>
</head>
<body>
	<div id="wrap">	
		
	</div>
	<script>
	window.onload=function(){
		var wrap=document.getElementById('wrap');
		var boxArr=[];
		var lastTime='000000';
		var boxInner='';
		for(var i=0;i<8;i++){
			var box=document.createElement('div');
			box.className='box';
			if((i+1)%3){
				boxArr.push(box);
				boxInner='<span>0</span><div class="top"><span>0</span></div><div class="move"><div class="back"><span>0</span></div><div class="front"><span>0</span></div></div>';
			}else{
				boxInner='<span class="maohao">:</span>'
			}
			box.innerHTML=boxInner;
			wrap.appendChild(box);
		}

		function timeString(n){
			return n<10 ? '0'+n : n + '';
		}

		function inner(){
			var time=new Date();
			var curTime=timeString(time.getHours())+timeString(time.getMinutes())+timeString(time.getSeconds());
			for(var i=0;i<curTime.length;i++){
				if(curTime.charAt(i) != lastTime.charAt(i)){
					boxArr[i].className='box';
					boxArr[i].innerHTML='<span>'+curTime[i]+'</span><div class="top"><span>'+lastTime[i]+'</span></div><div class="move"><div class="back"><span>'+curTime[i]+'</span></div><div class="front"><span>'+lastTime[i]+'</span></div></div>';
					(function(n){
						setTimeout(function(){
							n.className='box active';
						},20)
					})(boxArr[i])
				}
			}
			lastTime=curTime;
		}
		setInterval(inner, 1000)
	}

	</script>
</body>
</html>