`
lidong2001
  • 浏览: 2928 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

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

CSSIEXHTML 
阅读更多
首先是借鉴了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
分享到：
评论
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  
说白了 就是巧用边框
发表评论

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

相关推荐

    js css实现LCD数字显示

    "js css实现LCD数字显示"这个主题涉及到如何使用JavaScript（js）和层叠样式表（CSS）技术来模拟LCD液晶显示屏上的数字显示效果。液晶显示器（LCD）数字通常用于各种设备，如时钟、仪表盘或简单的用户界面，它们以...

    led数字样式css，html显示led数字

    在前端开发中，LED数字样式通常用于创建模拟电子显示屏效果，比如时钟、计数器或者仪表盘等。LED数字的样式主要通过CSS（层叠...通过不断优化和调整，我们可以在前端页面上实现逼真的LED数字显示效果，提升用户体验。

    CSS制作液晶屏的显示效果.

    根据给定的信息，本文将详细解释如何利用CSS技术来实现模拟液晶显示屏的显示效果，并特别关注数字累加功能的实现。 ### CSS制作液晶屏显示效果的技术背景 在现代Web开发中，利用CSS来创建视觉上令人印象深刻的动态...

    利用字体库打造一个模拟液晶数字格式显示的特效

    本教程将详细介绍如何利用字体库来构建一个模拟液晶数字格式显示的特效，让你的网页设计增添一份科技感。 首先，我们需要理解“液晶数字”（LCD数字）的特征。液晶显示屏通常以特定的样式显示数字，这种样式的特点...

    vue纯css数字滚动.vue

    vue纯css大屏数字滚动！

    纯CSS3模拟摩天轮旋转动画效果.zip

    【纯CSS3模拟摩天轮旋转动画效果】 在现代网页设计中，动态视觉效果是吸引用户注意力的关键元素之一。这个“纯CSS3模拟摩天轮旋转动画效果”提供了一种无需JavaScript仅通过CSS3实现的创新方法，为网页增添趣味性。...

    纯CSS3全屏响应式幻灯片特效.zip

    【标题】"纯CSS3全屏响应式幻灯片特效.zip"所涵盖的知识点主要集中在CSS3技术上，特别是如何利用CSS3特性实现全屏响应式的动态效果。在现代网页设计中，全屏幻灯片已成为一种流行的设计元素，它可以为用户提供更沉浸...

    纯CSS3抽屉式滑动侧边栏菜单设计

    【纯CSS3抽屉式滑动侧边栏菜单设计】是一种流行且实用的网页交互元素，它通过CSS3的新特性实现动态效果，为用户提供了友好的界面体验。在这个设计中，侧边栏菜单隐藏在屏幕边缘，当鼠标悬停或点击特定触发元素时，它...

    css模拟title和alt的提示效果

    css模拟title和alt的提示效果,可以查看淘宝网里的产品展示页面,用于显示产品的规格和相关信息.

    divcss模拟select

    divcss模拟select 下拉框 select 改变样式

    纯CSS简洁TAB

    7. **响应式设计**：考虑到不同设备的屏幕尺寸，纯CSS TAB应具备响应式设计，可以使用媒体查询(`media query`)来调整在小屏幕设备上的布局。 8. **无障碍性（Accessibility）**：确保TAB组件对键盘用户友好，例如...

    纯CSS3模拟太阳、地球、月亮旋转效果.zip

    在本项目中，我们探索的是如何使用纯CSS3来创建一个动态的太阳、地球和月亮旋转的模拟效果。这个效果完全不依赖JavaScript，只利用了CSS3的强大功能，因此在性能上可能更优，同时也对现代浏览器有较高的兼容性。然而...

    html5 css3带翻页数字时钟动画特效

    考虑到标签中提到了“翻页”，开发者可能会使用CSS3的`clip-path`或`mask`属性来创建数字切割效果，模拟纸片翻转。这两个属性可以定义元素的可视区域，通过动态改变这些区域的形状，可以实现数字翻转的动画效果。 ...

    纯css3模拟雷达扫描动画特效

    【纯CSS3模拟雷达扫描动画特效】是一种利用CSS3的强大功能来实现的视觉效果，它无需JavaScript或者其他编程语言，仅通过CSS3的属性和规则就能创建出动态的、类似雷达扫描的画面。这种特效通常用于网站设计中，为用户...

    纯CSS3模拟烧烤动画

    今天要来分享一款非常有创意的CSS3动画，这款动画模拟了一个烧烤架，烧烤架上的食物也都是用纯CSS3绘制而成，没有用一张图片，效果相当逼真。另外一个有意思的是，这个CSS3烧烤架还会冒烟，模拟了烧烤时的情景。 ...

    两款纯css3实现的动画菜单.zip

    总结来说，这两款纯CSS3实现的动画菜单展示了CSS3的强大功能，包括但不限于关键帧动画、转换、过渡、伪类选择器、Flexbox和Grid布局以及响应式设计。学习并熟练运用这些知识点，可以让你的网页菜单更加生动、易用，...

    纯css半圆角tab标签切换代码

    7. **响应式设计**：考虑到不同设备和屏幕尺寸，纯CSS Tab切换可能还包含媒体查询（`@media`），以便在移动设备上优化显示。 通过这个项目，开发者不仅可以学习到如何用纯CSS实现Tab标签切换，还能深入了解CSS的...

    纯css3飞机跑道响应式进度条动画特效

    【纯CSS3飞机跑道响应式进度条动画特效】是一种创新且引人注目的网页设计技术，它结合了CSS3的强大功能和动态效果，为用户提供了一种新颖的视觉体验。这种特效通常用于展示任务完成进度、加载状态或者在交互式用户...

    纯CSS实现交互式注册表单代码.zip

    开发者可能利用了CSS的伪类（如`:hover`, `:focus`, `:active`）来实现不同状态的效果，同时使用CSS的媒体查询（Media Queries）实现响应式布局，确保表单在不同设备上都能正常显示。 【标签】"js"可能是一个误解，...

Magicbox
Global site tag (gtag.js) - Google Analytics