jquery+css时钟.doc

简介今天我们将要制作一个丰富多彩的jQuery和CSS的时钟，这个时钟将使用tzineClock插件来吧，下载演示文件，并继续学习该教程吧。XHTML像往常一样，我们开始于XHTML标记。有所不同的是，该时钟的XHTML不是写在demo.html里，而是写成JavaScript，然后由jQuery动态载入到页面中（当然，我们也得至少有一个容器div在html页面内，用于插入该时钟）。这中做法可以节省我们手动键入类似的代码块（例如：时钟中有三个类似的代码块：小时，分钟，秒）。让我们看一看jQuery要插入XHTML的外观：jquery.tzineClock.jsdiv class=green clock此代码是包含在jquery.tzineClock / jquery.tzineClock.js。他被调用三次 小时，分，秒。这些都是后来的动画和每一秒的运动（您等会儿就能看到这一点）。在产生代码的过程中，有3个类被分配在的最顶层容器 绿色，蓝色和橙色。只要通过指定的这些类的参数，我们就能改变这些层的颜色。让我们继续下一个步骤。CSS首先，我们必须在在网页的头部分包含以下文件：demo.html以上的代码将styles.css的和jquery.tzineClock.css插入到页面中。styles.css风格化了demo页面，jquery.tzineClock.css用于丰富时钟的表盘（这也是插件的一部分）。现在，我们可以看一看在CSS的规则。styles.cssbody,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;#fancyClockmargin: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.rightdisplay:none;z-index:11;.clock .bg, .clock .frontwidth: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: */.orange .bg.left background:url(img/bg_orange.png) no-repeat left top; .green .bg.left background:url(img/bg_green.png) no-repeat left top; .blue .bg.leftbackground:url(img/bg_blue.png) no-repeat left top; /* The right part of the background: */.clock .bg.right left:100px; .orange .bg.right background:url(img/bg_orange.png) no-repeat right top; .green .bg.right background:url(img/bg_green.png) no-repeat right top; .blue .bg.right background:url(img/bg_blue.png) no-repeat right top; .clock .front.leftleft:0;z-index:10;jquery.tzineClock.css是jquery.tzineClock.js插件和一起的，它的作用是定义表盘的风格。有趣的是每个表盘运行使用独立的颜色规则，这也正是我们在步骤一中提到的。你可以通过以下图片说明来进一步了解该动画插图：jQueryJavaScript的插件使得代码可以很容易被重复使用，并在同一时间，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)tryconsole.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)optsk = optsk | defaultsk;);/ 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;i3;i+)/ Creating a new element and setting the color as a class name:tmp = $().attr(class,colorsi+ 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.colorNamegVarscolorsi = 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 2function 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(current10?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 =