jquery+css3实现彩色时钟表特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery+css3实现彩色时钟表特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery+css3实现彩色时钟表</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<link type="text/css" href="css/reset.css"/>
<style type="text/css">
.box{margin:10px auto;width:894px;height:863px;}
.clock{position:relative;width:894px;height:863px;background:url("images/bg.png") no-repeat;}
.second-hand,.minute-hand,.hour-hand{position:absolute;left:50%;margin-left:-6px;top:-13px;width:20px;height:894px;background:url("images/clock_needle.png") no-repeat;}
.second-hand{background-position:-1px 59px;z-index:1000;}
.minute-hand{background-position:-25px 56px;z-index:100;}
.hour-hand{background-position:-54px 56px;z-index:10;}
</style>

<script type="text/javascript">
$(function(){
	var $second = $(".second-hand"), /* 秒针 */
			$minute = $(".minute-hand"), /* 分针 */
			$hour = $(".hour-hand"), /* 时针 */
			timer = setInterval(nowTime,1000); /* 循环调用，一秒后调用一次 */
	function nowTime(){
		function getTime(){
			var now = new Date();
			return {
				hours: now.getHours() + now.getMinutes() / 60, /* 小时数，包括分钟数 */
				minutes: now.getMinutes() + now.getSeconds() / 60, /* 分针数，包括秒数 */
				seconds: now.getSeconds() /* 秒数 */
			}
		}
		var _date = getTime(); /* 接收的时间对象 */
		var _secondRotate = Math.floor(_date.seconds) * 6; /* 秒针，一圈360度总共是60秒（60格），一秒（一格）就是6度，乘以6的主要原因就是秒数乘以一格的度数等于总度数 */
		var _minuteRotate = _date.minutes * 6; /* 分针，一圈360度总共是60分钟，和秒数解释类似 */
		var _hourRotate =  (_date.hours % 12) * 30; /* 时针，一圈360度是12个小时，一个小时就是30度（其实也是5格），小时数乘以一小时的度数就是总度数。但是要考虑大于12的小时数，这里采取整除12的方发即可实现 */
		$second.css({"transform":"rotate("+_secondRotate+"deg)"}); /* 设置秒针旋转度 */
		$minute.css({"transform":"rotate("+_minuteRotate+"deg)"}); /* 设置分针旋转度 */
		$hour.css({"transform":"rotate("+_hourRotate+"deg)"}); /* 设置时针旋转度 */
	}

})
</script>
</head>
<body>
<div class="box">
	<div class="clock">
		<div class="second-hand"></div>
		<div class="minute-hand"></div>
		<div class="hour-hand"></div>
	</div>
</div>
</body>
</html>

CSS代码(reset.css):

@charset "utf-8";/* CSS Document */
/* 默认值、共用值设置 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,b,fieldset,legend,button,input,textarea,th,td,label{margin:0;padding:0;}
body,button,input,select,textarea{font-size:12px;font-family:'Microsoft Yahei',verdana;font-style:normal;font-stretch:normal;font-size-adjust:none;font-variant:normal;height:25px;}
/* remember to define focus styles! */
:focus{outline:0;}
/*:focus 伪类在元素获得焦点时向元素添加特殊的样式。 */
h1,h2,h3,h4,h5,h6{font-size:100%;}
abbr,acronym{border:0;font-variant:normal;}
address,cite,dfn,em,caption,code,strong,th,var{font-style:normal;font-weight:normal;}
code,kdb,pre,samp{font-family:"Courier New",Courier,monospace;}
ul,ol{list-style-image:none;list-style-position:outside;list-style-type:none;}
fieldset,img{border:0 none;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1;}
/* 向左浮动 */
.fl{float:left;}
.fr{float:right;}
/* 以上全为共用的 */
a{text-decoration:none;}
a:hover{text-decoration:underline;}

附件:下载该文件资源,减少时间成本(增值服务)