［原创］纯css模拟液晶式数字显示 -

lidong2001

浏览: 2927 次
性别:
来自: 北京

最近访客更多访客>>

wusefengye

jinjian1985go

Hubery_CL

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1)

社区版块

存档分类

2011-03 ( 1)
更多存档...

［原创］纯css模拟液晶式数字显示

CSS IE XHTML

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

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

特点如下：
1，纯css实现，无图片
2，以em为长度单位，支持缩放
3，以不同类名来控制显示数字，方便控制

已知问题：
1，在ff下设为奇数大小时比较杯具，因为ff在计算em长度时四舍五入问题导致棱角与线条会分裂开，ie反到不会。不过这个问题是可以妥善解决的，以后再说了。

<!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" title="">
/*
 * Description:
 * Author: dragonball
 * Create Date:2011-2-22
 * Copyright 2011
 * Dual licensed under the MIT and GPL licenses.
 */
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:600px;}

.clock{font-size:18px;width:9em;height:14em;border:1px solid #ddd;position:relative;}
.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;}

.c1 .n1,.c1 .n2,.c1 .n3,.c1 .n6,.c1 .n7{display:none}
.c2 .n1,.c2 .n4{display:none}
.c3 .n1,.c3 .n2{display:none}
.c4 .n2,.c4 .n3,.c4 .n6{display:none}
.c5 .n2,.c5 .n5{display:none}
.c6 .n5{display:none}
.c7 .n1,.c7 .n2,.c7 .n3,.c7 .n7{display:none}
.c8{}
.c9 .n2{display:none}
.c0 .n7{display:none}

</style>
<script type="text/javascript" language="javascript" >
var num=0,size=1;

function addNumber(){
	var clock=document.getElementById("mydemo").children[0];
	clock.className="clock c"+(++num % 10);
	return false;
}

function resize(){
	var clock=document.getElementById("mydemo").children[0];
	clock.style.fontSize=(++size % 20)+"px";
	return false;
}
</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>

<input type="button" value="改变大小" onclick="resize()" />
<input type="button" value="数字累加" onclick="addNumber()" />
</body>

</html>

clock.rar (1.3 KB)
下载次数: 564

查看图片附件

分享到：

2011-03-04 20:46
浏览 2927
评论(6)
论坛回复 / 浏览 (9 / 7353)
分类:Web前端
查看更多

6 楼 kkvsyy 2011-06-02

变态　　这有会功夫PS做一个字了　
好钢要用在刀刃上　

5 楼 lidong2001 2011-03-13

呵呵，谢谢!

4 楼 superobin 2011-03-09

虽然不复杂，但是有这个耐心写出来真的很不容易。挺楼主一下呵呵

3 楼 lidong2001 2011-03-06

其实很容易就能封装成时钟、倒计时、秒表一类的应用。

<!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" title="">
/*
 * Description:
 * Author: dragonball
 * Create Date:2011-2-22
 * Copyright 2011
 * Dual licensed under the MIT and GPL licenses.
 */
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:960px;letter-spacing:-1em;}

.clock{font-size:16px;width:9em;height:14em;border:1px solid #ddd;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;}
.dot .dot1,.dot .dot2 {width:0;height:0;border:0.5em solid #565656;position:absolute;left:0.5em;}
.dot .dot1{top:5.5em;}
.dot .dot2{top:7.5em;}
.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)/2+"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[6].className="clock c"+(sec % 10);
				clocks[5].className="clock c"+((sec-(sec % 10))/10);

				if( sec % 2 === 0 ){
					clocks[2].className="clock dot";
				}else{
					clocks[2].className="clock dot putout";
				}

				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>
	<div class="clock dot">
		<div class="dot1"></div>
		<div class="dot2"></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 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 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>
<input type="button" value="改变大小" onclick="Clock.resize()" />
<input type="button" value="启动" onclick="Clock.startClock()" />
<input type="button" value="停止" onclick="Clock.stopClock()" />
</body>

</html>

2 楼 lidong2001 2011-03-06

恩，是的，原理一点都不复杂。

1 楼 binlaniua 2011-03-05

说白了就是巧用边框

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

［原创］纯css模拟液晶式数字显示

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

［原创］纯css模拟液晶式数字显示

评论

发表评论

相关推荐

最近访客更多访客>>