今天我们将要制作一个丰富多彩的jQuery和CSS的时钟，这个时钟将使用tzineClock插件
来吧，下载演示文件，并继续学习该教程吧。
XHTML
像往常一样，我们开始于XHTML标记。有所不同的是，该时钟的XHTML不是写在demo.html里，而是写成JavaScript，然后由jQuery动态载入到页面中（当然，我们也得至少有一个容器div在html页面内，用于插入该时钟）。
这中做法可以节省我们手动键入类似的代码块（例如：时钟中有三个类似的代码块：小时，分钟，秒）。
让我们看一看jQuery要插入XHTML的外观：
jquery.tzineClock.js
此代码是包含在jquery.tzineClock / jquery.tzineClock.js。他被调用三次 – 小时，分，秒。这些都是后来的动画和每一秒的运动（您等会儿就能看到这一点）。
在产生代码的过程中，有3个类被分配在的最顶层容器 – 绿色，蓝色和橙色。只要通过指定的这些类的参数，我们就能改变这些层的颜色。
让我们继续下一个步骤。
CSS
首先，我们必须在在网页的头部分包含以下文件：
demo.html
以上的代码将styles.css的和jquery.tzineClock.css插入到页面中。styles.css风格化了demo页面，jquery.tzineClock.css用于丰富时钟的表盘（这也是插件的一部分）。
现在，我们可以看一看在CSS的规则。
styles.css
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* Simple page reset */
margin:0;
padding:0;
}
body{
/* Setting default text color, background and a font stack */
color:#dddddd;
font-size:13px;
background: #302b23;
font-family:Arial, Helvetica, sans-serif;
}
#fancyClock{
margin:40px auto;
height:200px;
border:1px solid #111111;
width:600px;
}
这些几行都是必须的，他用于制作演示页面的风格。在CSS代码中，我们首先实现一个简单的CSS重置，这将确保该网页上的元素在不同的浏览器上外观一致。
之后，我们定义的网页正文的风格，最后是fancyClock分区，我们将在稍后插入三个表盘。
jquery.tzineClock.css
.clock{
/* The .clock div. Created dynamically by jQuery */
background-color:#252525;
height:200px;
width:200px;
position:relative;
overflow:hidden;
float:left;
}
.clock .rotate{
/* There are two .rotate divs - one for each half of the background */
position:absolute;
width:200px;
height:200px;
top:0;
left:0;
}
.rotate.right{
display:none;
z-index:11;
}
.clock .bg, .clock .front{
width:100px;
height:200px;
background-color:#252525;
position:absolute;
top:0;
}
.clock .display{
/* Holds the number of seconds, minutes or hours respectfully */
position:absolute;
width:200px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
z-index:20;
color:#F5F5F5;
font-size:60px;
text-align:center;
top:65px;
left:0;
/* CSS3 text shadow: */
text-shadow:4px 4px 5px #333333;
}
/* The left part of the background: */
.clock .bg.left{ left:0; }
/* Individual styles for each color: */
.blue .bg.left{
/* The right part of the background: */
.clock .bg.right{ left:100px; }
.clock .front.left{
left:0;
z-index:10;
}
jquery.tzineClock.css是jquery.tzineClock.js插件和一起的，它的作用是定义表盘的风格。
有趣的是每个表盘运行使用的颜色规则，这也正是我们在步骤一中提到的。
你可以通过以下图片说明来进一步了解该动画插图：
jQuery
JavaScript的插件使得代码可以很容易被重复使用，并在同一时间，jQuery能使我们感受到它选择器和方法的强大。
为了能够使用jQuery库，我们首先需要包含一些脚本：
demo.html
第一个文件是jQuery本身，来自谷歌的CDN，后面2个分别是时钟插件和用于运行演示的script.js文件。
script.js
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
$('#fancyClock').tzineClock();
});
如果您曾经学习过我们以前的一些教程，你可能会比较期待第50行以上的代码，但这次我们的脚本文件只包含一行代码 – 用于调用我们的插件。
这使得它非常容易被包括到现有的站点（这是jQuery的插件摆在首位的目的）。
让我们更深入地了解一下这个小插件：
jquery.tzineClock.js – Part 1
(function($){
// A global object used by the functions of the plug-in:
var gVars = {};
// Extending the jQuery core:
$.fn.tzineClock = function(opts){
// "this" contains the elements that were selected when calling the plugin: $('elements').tzineClock();
// If the selector returned more than one element, we use the first one:
var container = this.eq(0);
if(!container)
{
try{
console.log("Invalid selector!");
} catch(e){}
return false;
}
if(!opts) opts = {};
var defaults = {
/* Additional options will be added in future versions of the plugin. */
};
/* Merging the provided options with the default ones (will be used in future versions of the plugin): */
$.each(defaults,function(k,v){
opts[k] = opts[k] || defaults[k];
});
// Calling the setUp function and passing the container,
// will be available to the setUp function as "this":
setUp.call(container);
return this;
}
function setUp()
{
// The colors of the dials:
var colors = ['orange','blue','green'];
var tmp;
for(var i=0;i<3;i++)
{
// Creating a new element and setting the color as a class name:
tmp = $('').attr('class',colors[i]+' clock').html(
''+
''+
''+
''+
''+
''+
''+
''
);
// Appending to the fancyClock container:
$(this).append(tmp);
// Assigning some of the elements as variables for speed:
tmp.rotateLeft = tmp.find('.rotate.left');
tmp.rotateRight = tmp.find('.rotate.right');
tmp.display = tmp.find('.display');
// Adding the dial as a global variable. Will be available as gVars.colorName
gVars[colors[i]] = tmp;
}
// Setting up a interval, executed every 1000 milliseconds:
setInterval(function(){
var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
animation(gVars.green, s, 60);
animation(gVars.blue, m, 60);
animation(gVars.orange, h, 24);
},1000);
}
做好一个jQuery插件，可以归结为通过jQuery.fn方法确定一个自定义函数。这样，你的jQuery函数是可以被用在任何元素上。
例如，在script.js，我们选择的div的id是fancyClock的宽度和使用tzineClock（）方法：$（’＃fancyClock’）.tzineClock（）;我们选择的元素是后来传递给tzineClock的功能，并通过了“this”属性被使用。
jquery.tzineClock.js – Part 2
function animation(clock, current, total)
{
// Calculating the current angle:
var angle = (360/total)*(current+1);
var element;
if(current==0)
{
// Hiding the right half of the background:
clock.rotateRight.hide();
// Resetting the rotation of the left part:
rotateElement(clock.rotateLeft,0);
}
if(angle<=180)
{
// The left part is rotated, and the right is currently hidden:
element = clock.rotateLeft;
}
else
{
// The first part of the rotation has completed, so we start rotating the right part:
clock.rotateRight.show();
clock.rotateLeft.show();
rotateElement(clock.rotateLeft,180);
element = clock.rotateRight;
angle = angle-180;
}
rotateElement(element,angle);
// Setting the text inside of the display element, inserting a leading zero if needed:
clock.display.html(current<10?'0'+current:current);
}
function rotateElement(element,angle)
{
// Rotating the element, depending on the browser:
var rotate = 'rotate('+angle+'deg)';
if(element.css('MozTransform')!=undefined)
element.css('MozTransform',rotate);
else if(element.css('WebkitTransform')!=undefined)
element.css('WebkitTransform',rotate);
// A version for internet explorer using filters, works but is a bit buggy (no surprise here):
else if(element.css("filter")!=undefined)
{
var cos = Math.cos(Math.PI * 2 / 360 * angle);
var sin = Math.sin(Math.PI * 2 / 360 * angle);
element.css("filter
element.css("left",-Math.floor((element.width()-200)/2));
element.css("top",-Math.floor((element.height()-200)/2));
}
}
})(jQuery)
该插件最后使用的2个函数是animation和rotateElement。第一个根据传递的值来更新表盘（我们还传递了最高值，这样该函数就可以计算出旋转参数）。
下一个函数是真正用于的旋转元素的。旋转只适用于Firefox和Safari，Chrome和IE6 +。 Internet Explorer不支持对CSS3的旋转，但它提供了一个专有的过滤属性用于完成类似的效果。
到这里，我们这个丰富多彩的jQuery的时钟就完成！
总结
今天，我们建立CSS和jQuery的时钟效果，同时也测试了tzineClock插件。你可以自由地使用该项目的代码。作为奖励，在源代码中已经包括PSD文件，该文件用来做背景，这样你可以轻松地创建新的颜色和外观设计的表盘。下载本文
