纯css模拟液晶式显示数字时间-幸凡学习网

纯css模拟液晶式显示数字时间

关注我吧

2011/7/6 15:25:24 阅读次数:7863Tags:css 摸拟时间

首先是借鉴了yiminghe大虾的创意和思路(http://www.iteye.com/topic/705529)，可惜看到帖子的时候里面的demo已经打不开了，所以决定自己也做一个。

我觉得他画的数字不好看，所以我还是按照经典样式做的。另外变换数字的原理和思路也他的也不一样，我是全都交给css来完成了，我个人认为渲染效率更高些，实现起来也更简单些。

其实很容易就能封装成时钟、倒计时、秒表一类的应用。
特点如下：
1，纯css实现，无图片
2，以em为长度单位，支持缩放
3，以不同类名来控制显示数字，方便控制

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title></title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
#mydemo{margin:100px auto;width:277px;letter-spacing:-1em;}
#mydemo span{margin:0 5px;font-size:0;width:2em;height:14em;display:inline-block;position:relative;overflow:hidden;}

.clock{font-size:16px;width:9em;height:14em;position:relative;display:inline-block;margin:0 2px;-webkit-text-size-adjust:none;}
.clock{*display:inline;}
.clock div{position: absolute;border-style:solid;}
.clock .l,.clock .r,.clock .u,.clock .d{width:0;height:0;overflow:hidden;}

.clock .v{width:0;height:5em;border-width:0 0.5em;border-color:#565656;}
.clock .v .u{border-style:dotted dotted solid dotted;border-width:0 0.5em 0.5em;border-color:transparent transparent #565656 transparent;top:-0.5em;left:-0.5em;}
.clock .v .d{border-style:solid dotted dotted dotted;border-width:0.5em 0.5em 0 0.5em;border-color:#565656 transparent transparent transparent;left:-0.5em;bottom:-0.5em}

.clock .h{width:5.5em;height:0;border-width:0.5em 0;border-color:#565656;}
.clock .h .l{border-style:dotted solid dotted dotted;border-width:0.5em 0.5em 0.5em 0;border-color:transparent #565656 transparent transparent;top:-0.5em;left:-0.5em;}
.clock .h .r{border-style:dotted dotted dotted solid;border-width:0.5em 0 0.5em 0.5em;border-color:transparent transparent transparent #565656;top:-0.5em;right:-0.5em;}

.clock .n1{left:0.5em;top:1.5em;}
.clock .n2{left:0.5em;top:7.5em;}
.clock .n4{left:7.5em;top:7.5em;}
.clock .n5{left:7.5em;top:1.5em;}

.clock .n6{top:0.4em;left:1.8em;}
.clock .n3{top:12.5em;left:1.8em;}
.clock .n7{top:6.5em;left:1.8em;}

.dot {width:2em;height:14em;}
.dot1,.dot2 {width:0;height:0;border:0.5em solid #565656;position:absolute;left:0.5em;font-size:1em}
.dot1{top:4em;}
.dot2{top:9em;}
.putout .dot1,.putout .dot2 {display:none;}

/*原始样式
.c1 .n1,.c1 .n2,.c1 .n3,.c1 .n6,.c1 .n7,
.c2 .n1,.c2 .n4,
.c3 .n1,.c3 .n2,
.c4 .n2,.c4 .n3,.c4 .n6,
.c5 .n2,.c5 .n5,
.c6 .n5,
.c7 .n1,.c7 .n2,.c7 .n3,.c7 .n7,
.c9 .n2,
.c0 .n7{display:none}
*/

.c1 .n1,.c1 .n2,.c1 .n3,.c1 .n6,.c1 .n7,
.c2 .n1,.c2 .n4,
.c3 .n1,.c3 .n2,
.c4 .n2,.c4 .n3,.c4 .n6,
.c5 .n2,.c5 .n5,
.c6 .n5,
.c7 .n1,.c7 .n2,.c7 .n3,.c7 .n7,
.c9 .n2,
.c0 .n7{border-color:#eee;}

.c1 .n3 .l,.c1 .n3 .r,.c1 .n6 .l,.c1 .n6 .r,.c1 .n7 .l,.c1 .n7 .r,
.c4 .n3 .l,.c4 .n3 .r,.c4 .n6 .l,.c4 .n6 .r,
.c7 .n3 .l,.c7 .n3 .r,.c7 .n7 .l,.c7 .n7 .r,
.c0 .n7 .l,.c0 .n7 .r{border-left-color:#eee;border-right-color:#eee;}

.c1 .n1 .u,.c1 .n1 .d,.c1 .n2 .u,.c1 .n2 .d,
.c2 .n1 .u,.c2 .n1 .d,.c2 .n4 .u,.c2 .n4 .d,
.c3 .n1 .u,.c3 .n1 .d,.c3 .n2 .u,.c3 .n2 .d,
.c4 .n2 .u,.c4 .n2 .d,
.c5 .n2 .u,.c5 .n2 .d,.c5 .n5 .u,.c5 .n5 .d,
.c6 .n5 .u,.c6 .n5 .d,
.c7 .n1 .u,.c7 .n1 .d,.c7 .n2 .u,.c7 .n2 .d,
.c9 .n2 .u,.c9 .n2 .d{border-top-color:#eee;border-bottom-color:#eee;}

</style>
<script type="text/javascript" language="javascript" >

	var Clock={
		size:1,
		handle:null,
		hour:0,
		min:0,
		sec:0,
		resize:function(){
			var clocks=document.getElementById("mydemo").children,i=0,k=clocks.length;
			var fontsize=(this.size % 20)+"px",halfsize=(this.size++ % 20)+"px";

			for(;i<k-2;){
				clocks[i++].style.fontSize=fontsize;
			}
			clocks[i++].style.fontSize=halfsize;
			clocks[i++].style.fontSize=halfsize;
		},

		stopClock:function(){
			clearTimeout(Clock.handle);
		},

		startClock:function(){
				var da=new Date();
				var clocks=document.getElementById("mydemo").children;

				var sec=da.getSeconds();
				clocks[7].className="clock c"+(sec % 10);
				clocks[6].className="clock c"+((sec-(sec % 10))/10);


				if( Clock.min!=da.getMinutes() ){
					Clock.min=da.getMinutes();
					clocks[4].className="clock c"+(Clock.min % 10)	;
					clocks[3].className="clock c"+((Clock.min-(Clock.min % 10))/10);
				}

				if( Clock.hour!=da.getHours() ){
					Clock.hour=da.getHours();
					clocks[1].className="clock c"+(Clock.hour % 10)	;
					clocks[0].className="clock c"+((Clock.hour-(Clock.hour % 10))/10);
				}
				Clock.handle=setTimeout(arguments.callee,1000);
		}
	}

</script>
</head>

<body>
<div id="mydemo">
	<div class="clock c0">
		<div class="v n1"><div class="u"></div><div class="d"></div></div>
		<div class="v n2"><div class="u"></div><div class="d"></div></div>
		<div class="h n3"><div class="l"></div><div class="r"></div></div>
		<div class="v n4"><div class="u"></div><div class="d"></div></div>
		<div class="v n5"><div class="u"></div><div class="d"></div></div>
		<div class="h n6"><div class="l"></div><div class="r"></div></div>
		<div class="h n7"><div class="l"></div><div class="r"></div></div>
	</div>
	<div class="clock c0">
		<div class="v n1"><div class="u"></div><div class="d"></div></div>
		<div class="v n2"><div class="u"></div><div class="d"></div></div>
		<div class="h n3"><div class="l"></div><div class="r"></div></div>
		<div class="v n4"><div class="u"></div><div class="d"></div></div>
		<div class="v n5"><div class="u"></div><div class="d"></div></div>
		<div class="h n6"><div class="l"></div><div class="r"></div></div>
		<div class="h n7"><div class="l"></div><div class="r"></div></div>
	</div>
	<span>   
        <div class="dot1"></div>   
        <div class="dot2"></div>   
    </span>
	<div class="clock c0">
		<div class="v n1"><div class="u"></div><div class="d"></div></div>
		<div class="v n2"><div class="u"></div><div class="d"></div></div>
		<div class="h n3"><div class="l"></div><div class="r"></div></div>
		<div class="v n4"><div class="u"></div><div class="d"></div></div>
		<div class="v n5"><div class="u"></div><div class="d"></div></div>
		<div class="h n6"><div class="l"></div><div class="r"></div></div>
		<div class="h n7"><div class="l"></div><div class="r"></div></div>
	</div>
	<div class="clock c0">
		<div class="v n1"><div class="u"></div><div class="d"></div></div>
		<div class="v n2"><div class="u"></div><div class="d"></div></div>
		<div class="h n3"><div class="l"></div><div class="r"></div></div>
		<div class="v n4"><div class="u"></div><div class="d"></div></div>
		<div class="v n5"><div class="u"></div><div class="d"></div></div>
		<div class="h n6"><div class="l"></div><div class="r"></div></div>
		<div class="h n7"><div class="l"></div><div class="r"></div></div>
	</div>
	<span>   
        <div class="dot1"></div>   
        <div class="dot2"></div>   
    </span>
	<div class="clock c0">
		<div class="v n1"><div class="u"></div><div class="d"></div></div>
		<div class="v n2"><div class="u"></div><div class="d"></div></div>
		<div class="h n3"><div class="l"></div><div class="r"></div></div>
		<div class="v n4"><div class="u"></div><div class="d"></div></div>
		<div class="v n5"><div class="u"></div><div class="d"></div></div>
		<div class="h n6"><div class="l"></div><div class="r"></div></div>
		<div class="h n7"><div class="l"></div><div class="r"></div></div>
	</div>
	<div class="clock c0">
		<div class="v n1"><div class="u"></div><div class="d"></div></div>
		<div class="v n2"><div class="u"></div><div class="d"></div></div>
		<div class="h n3"><div class="l"></div><div class="r"></div></div>
		<div class="v n4"><div class="u"></div><div class="d"></div></div>
		<div class="v n5"><div class="u"></div><div class="d"></div></div>
		<div class="h n6"><div class="l"></div><div class="r"></div></div>
		<div class="h n7"><div class="l"></div><div class="r"></div></div>
	</div>
</div>
<script>
Clock.resize();
Clock.resize();
Clock.resize();
Clock.resize();
Clock.startClock();
</script>
</body>
</html>

大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：【幸凡前端技术交流群】

如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=180【纯css模拟液晶式显示数字时间】幸凡学习网

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)