jquery 模拟出的LCD 时钟效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>LCD Clock</title>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
.LCDclock{background:#CCCCCC;display:inline-block;padding:5px 10px;border:1px #737373 solid}
.LCDclock span{background-image:url(//ku.shouce.ren/files/images/201601/56a3697601d57.gif);background-repeat:no-repeat;display:inline-block; overflow:hidden; width:20px;height:33px}
.LCDclock span.num0{background-position:0px 0px}
.LCDclock span.num1{background-position:-25px 0}
.LCDclock span.num2{background-position:-50px 0}
.LCDclock span.num3{background-position:-75px 0}
.LCDclock span.num4{background-position:-100px 0}
.LCDclock span.num5{background-position:-125px 0}
.LCDclock span.num6{background-position:-150px 0}
.LCDclock span.num7{background-position:-175px 0}
.LCDclock span.num8{background-position:-200px 0}
.LCDclock span.num9{background-position:-225px 0}
.LCDclock span.numblank{background-position:-315px 0px}
.LCDclock span.numseparator{width:7px;background-position:-250px 0px}
.LCDclock span.numspt{width:15px;background-position:-290px 0px}
.LCDclock span.year{width:18px;background-position:-307px 0px}
.LCDclock span.month{width:18px;background-position:-323px 0px}
.LCDclock span.day{width:18px;background-position:-340px 0px;margin-right:10px}
div{margin-bottom:10px}
</style>
</head>
<body>
<div id="time1">2011/4/18 23:59:45</div>
<div id="time2">2000/1/1 23:59:46</div>
<div id="time3">1648/12/31 23:59:47</div>
<div id="time4">2011/3/26 20:18:12</div>
<script type="text/javascript">
	$(document).ready(function(){
		jQuery.fn.LCDClock = function(options){
			var $clock = $(this);
			var defaultOptions = {
				timeText	: $clock.text(),
			};
			if ($clock.text()!=""){
				defaultOptions = {timeText : $clock.text()}
			}
			options = $.extend(defaultOptions,options);
			if (typeof(options.timeText)=="undefined" || options.timeText==""){
				$clock.text("启动LCD Clock失败！")
			}
			else{
				window.setTimeout(
					function(){
						var time = new Date(options.timeText);
						time.setSeconds( time.getSeconds() + 1 );
						var year = time.getFullYear();
						var month = time.getMonth() + 1;
						var day = time.getDate();
						var hour = time.getHours();
						var minute = time.getMinutes();
						var second = time.getSeconds();
						var time2 = year + "/" + month + "/" + day + " " + hour + ":" + minute + ":" + second;
						options.timeText = time2;
						var html = "";
						var Y1 = Math.floor(year/1000);
						var Y2 = Math.floor((year-1000*Y1)/100);
						var Y3 = Math.floor((year-1000*Y1-100*Y2)/10);
						var Y4 = year%10;
						html += "<span class=\"LCDclock\">";
						html += "<span class=\"num" + Y1 + "\"></span><span class=\"num" + Y2 + "\"></span><span class=\"num" + Y3 + "\"></span><span class=\"num" + Y4 + "\"></span><span class=\"year\"></span>";
						html += "<span class=\"num" + Math.floor(month/10) + "\"></span><span class=\"num" + month%10 + "\"></span><span class=\"month\"></span>";
						html += "<span class=\"num" + Math.floor(day/10) + "\"></span><span class=\"num" + day%10 + "\"></span><span class=\"day\"></span>";
						html += "<span class=\"num" + Math.floor(hour/10) + "\"></span><span class=\"num" + hour%10 + "\"></span><span class=\"numseparator\"></span>";
						html += "<span class=\"num" + Math.floor(minute/10) + "\"></span><span class=\"num" + minute%10 + "\"></span><span class=\"numseparator\"></span>";
						html += "<span class=\"num" + Math.floor(second/10) + "\"></span><span class=\"num" + second%10 + "\"></span>";
						html += "</span>";
						$clock.html(html);
						$clock.LCDClock(options);
					},
					1000
				);
			}
		}
		$("#time4").text(Date());
		$("#time1").LCDClock();
		$("#time2").LCDClock();
		$("#time3").LCDClock();
		$("#time4").LCDClock();
	});
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jquery 模拟出的LCD 时钟效果

分类

jQuery实例

描述

jquery 模拟出的LCD 时钟效果，如果页面有错误，请刷新一次就正常了。