jquery 模拟出的LCD 时钟效果

时间：2014-06-09 08:28 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!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="http://www.codefans.net/ajaxjs/jquery-1.4.2.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(http://www.codefans.net/jscss/demoimg/201104/lcdnum.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 += "";
						html += "";
						html += "";
						html += "";
						html += "";
						html += "";
						html += "";
						html += "";
						$clock.html(html);
						$clock.LCDClock(options);
					},
					1000
				);
			}
		}
		$("#time4").text(Date());
		$("#time1").LCDClock();
		$("#time2").LCDClock();
		$("#time3").LCDClock();
		$("#time4").LCDClock();
	});
</script>
</body>
</html>

jquery 模拟出的LCD 时钟效果

网页特效