论坛首页 → Web前端技术论坛 →

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

浏览 7352 次
锁定老帖子 主题：［原创］纯css模拟液晶式数字显示
精华帖 (0) :: 良好帖 (1) :: 新手帖 (0) :: 隐藏帖 (5)
作者 正文
  • lidong2001
  • 等级: 初级会员
  • 性别:
  • 文章: 12
  • 积分: 40
  • 来自: 北京
   发表时间：2011-03-04  
CSS
首先是借鉴了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>
  • 大小: 706 Bytes
返回顶楼
         
  • binlaniua
  • 等级: 初级会员
  • 性别:
  • 文章: 126
  • 积分: 0
  • 来自: 南京
   发表时间：2011-03-05  
说白了 就是巧用边框
返回顶楼
          回帖地址
0 请登录后投票
  • lidong2001
  • 等级: 初级会员
  • 性别:
  • 文章: 12
  • 积分: 40
  • 来自: 北京
   发表时间：2011-03-06  
恩，是的，原理一点都不复杂。
返回顶楼
          回帖地址
0 请登录后投票
  • lidong2001
  • 等级: 初级会员
  • 性别:
  • 文章: 12
  • 积分: 40
  • 来自: 北京
   发表时间：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>
返回顶楼
          回帖地址
0 请登录后投票
  • superobin
  • 等级: 初级会员
  • 性别:
  • 文章: 101
  • 积分: 50
  • 来自: 大连
   发表时间：2011-03-09  
虽然不复杂，但是有这个耐心写出来真的很不容易。挺楼主一下呵呵
返回顶楼
          回帖地址
0 请登录后投票
  • lidong2001
  • 等级: 初级会员
  • 性别:
  • 文章: 12
  • 积分: 40
  • 来自: 北京
   发表时间：2011-03-13  
呵呵，谢谢!
返回顶楼
          回帖地址
0 请登录后投票
  • kkvsyy
  • 等级: 二星会员
  • 性别:
  • 文章: 72
  • 积分: 240
  • 来自: 北京
   发表时间：2011-06-02  
变态　　这有会功夫PS做一个字了　
好钢要用在刀刃上　
返回顶楼
          回帖地址
0 请登录后投票
  • charrysong
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 50
  • 来自: 广州
   发表时间：2011-07-06  
封装比较难吧。大小都不是很好控制!字体都很难控制。。缩的太小看起来不是很清析。建议还是用图片给力点！
返回顶楼
          回帖地址
0 请登录后投票
  • mrbbljc
  • 等级: 初级会员
  • 性别:
  • 文章: 10
  • 积分: 40
  • 来自: 武汉
   发表时间：2011-07-08  
有创意，得顶
返回顶楼
          回帖地址
0 请登录后投票
  • wfsheep
  • 等级: 初级会员
  • 文章: 1
  • 积分: 30
   发表时间：2011-07-08  
不失为一种尝试，不过私以为用图片较省时间~~
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics