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

charrysong

浏览: 48899 次
性别:
来自: 广州

最近访客更多访客>>

wygw

wy_2017

君子之交淡于水

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Web CSS 数字时间

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

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

其实很容易就能封装成时钟、倒计时、秒表一类的应用。
特点如下：
1，纯css实现，无图片
2，以em为长度单位，支持缩放
3，以不同类名来控制显示数字，方便控制
转自：http://www.ok22.org/art_detail.aspx?id=180(可直接运行)

<!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>

分享到：

谈谈网页布局之境界 | 前端设计js+Tab切换可关闭+添加并自动判断 ...

2011-07-18 09:22
浏览 907
评论(0)
分类:Web前端
查看更多

发表评论

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

相关推荐

哈尔滨工程大学833社会研究方法2020考研专业课初试大纲.pdf: 哈尔滨工程大学考研初试大纲

基于ASP酒店房间预约系统(源代码+论文)【ASP】.zip: 基于ASP酒店房间预约系统(源代码+论文)【ASP】

毕业设计基于机器学习的DDoS入侵检测python源码+设计文档.zip: 毕业设计基于机器学习的DDoS入侵检测python源码（高分项目）.zip个人经导师指导并认可通过的高分毕业设计项目，评审分98分。主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。

NewNormal.txt: NewNormal

re2-0.2.14.tar.gz: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

哈尔滨工程大学《常微分方程》2020考研专业课复试大纲.pdf: 哈尔滨工程大学考研复试大纲

grpcio-1.14.0-cp35-cp35m-macosx_10_7_intel.whl: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

哈尔滨工程大学《化工原理》2020考研专业课复试大纲.pdf: 哈尔滨工程大学考研复试大纲

基于 STM32 U575 芯片组: 头 microSWIFT V2 固件，基于 STM32 U575 芯片组。作为项目导入到STM32CubeIDE中

bailando 网络 smpl pkl 数据+ blendershape csv数据集训练代码: bailando 网络 smpl pkl 数据+ blendershape csv数据集训练代码

cryptography-2.0-cp34-cp34m-manylinux1_x86_64.whl: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

Arthas测试使用-ThreadDeadLock代码: Arthas测试使用

re2-0.2.21.tar.gz: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

基于Java的基于流媒体的vod视频点播网(源码+论文+需求分析+数据库文件+演示视频).zip: 本系统最大的特点是使用操作简单、友好的提示信息。本系统将实现以下基本功能： (1) 系统具有简洁大方的页面，使用简便，友好的错误操作提示 (2) 管理员用户具有系统信息管理、班级信息管理、教师信息管理、学生信息管理、公告管理、留言管理、资料管理、点播视频管理等功能。 (3) 具有较强的安全性，避免用户的恶意操作本基于Web技术的B/S结构的系统采用jsp技术进行开发设计，开发环境是MyEclipse，服务器采用tomcat，通过jdbc驱动和数据库进行无缝连接，具有较高的完整性，一致性和安全性。

基于Python+PyQt5的网上书店管理系统源码+项目说明(含登录功能+课设报告).zip: 基于Python+PyQt5的网上书店管理系统源码+项目说明(含登录功能+课设报告).zip 基于Python+PyQt5的网上书店管理系统源码+项目说明(含登录功能+课设报告).zip 基于Python+PyQt5的网上书店管理系统源码+项目说明(含登录功能+课设报告).zip 【优质项目推荐】 1.项目代码功能经验证ok，确保稳定可靠运行。欢迎下载使用！在使用过程中，如有问题或建议，请及时私信沟通，帮助解答。 2.项目主要针对各个计算机相关专业，包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 3.项目具有丰富的拓展空间，不仅可作为入门进阶，也可直接作为毕设、课程设计、大作业、项目初期立项演示等用途。 4.如果基础还行，或热爱钻研，可基于此项目进行二次开发，DIY其他不同功能。基于Python+PyQt5的网上书店管理系统源码+项目说明(含登录功能+课设报告).zip 功能 - 智能检查：检查书店存在此图书以及电话号码是否合法 - 采用下拉框智能补全，通过出售书名来补全，作者信息栏，通过出售书名来补全出版社，以确保书名，作者，出版社一一对应；通过买方手机号来补全默认配送地址，配送地址可随改 - 智能提示：提示书名与电话号码填写问题 - 第二遍确认 ### 修改图书页 ![](https://gowi-picgo.oss-cn-shenzhen.aliyuncs.com/picgo/20200607204627.png) 功能： - 修改图书信息（按下修改，使其一行可以修改，其余行不可修改，且不同行按钮处于冻结状态，按下完成按钮修改内容同步至数据库） - 翻页 - 返回上一级 - 查询 ### 查看会员信息 ![](https://gowi-picgo.oss-cn-shenzhen.aliyuncs.com/picgo/20200607205033.png) 功能： - 不可编辑 - 分页 - 查询 - 返回主页 ### 查看购买记录 ![](https://gowi-picgo.oss-cn-shenzhen.aliyuncs.com/picgo/20200607205146.png) 功能 - 查询 - 分页 - 按时间排序 - 不可编辑

华为OD机试（A卷+B卷+C卷+D卷）2024真题目录（全、新、准）: 2024版华为OD机试题库，包含C、D卷所有真题，粉丝可领取体验卡免费看题，包含面试手撕代码等等内容

平台通过测量手簿批量制作外业记录表: 铁路工程管理平台通过测量手簿批量转外业记录表,生成之后通过wps js宏批量应用样式

基于协同过滤的就业信息分析及个性化推荐微信小程序+源代码+文档说明: - 不懂运行，下载完可以私聊问，可远程教学该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ <项目介绍> 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------

基于C语言+stm32和esp8266通过点灯科技实现的智能台灯设计系统+源码+设计思维导图+PCB设计（毕业设计&课程设计）: 基于C语言+stm32和esp8266通过点灯科技实现的智能台灯设计系统+源码+设计思维导图+PCB设计，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于C语言+stm32和esp8266通过点灯科技实现的智能台灯设计系统+源码+设计思维导图+PCB设计，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于C语言+stm32和esp8266通过点灯科技实现的智能台灯设计系统+源码+设计思维导图+PCB设计，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 项目简介：使用stm32和esp8266通过点灯科技实现的智能台灯设计。硬件平台：STM32 + ESP8266 + BH1750 + OLED12864 + W25Q64 ; 使用STM32接收esp8266的串口数据。 ESP8266接入BLINKER平台，控制数据传输。通过PWM控制RGB 和白光，黄光的亮度开关等数据。

pyzmq-25.1.2-cp311-cp311-macosx_10_15_universal2.whl: Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

最近访客 更多访客>>