jquery+css时钟.docVIP

简介 今天我们将要制作一个丰富多彩的jQuery和CSS的时钟，这个时钟将使用tzineClock插件 来吧，下载演示文件，并继续学习该教程吧。 XHTML 像往常一样，我们开始于XHTML标记。有所不同的是，该时钟的XHTML不是写在demo.html里，而是写成JavaScript，然后由jQuery动态载入到页面中（当然，我们也得至少有一个容器div在html页面内，用于插入该时钟）。 这中做法可以节省我们手动键入类似的代码块（例如：时钟中有三个类似的代码块：小时，分钟，秒）。 让我们看一看jQuery要插入XHTML的外观： jquery.tzineClock.js !-- The first class (green in this case) is assigned dynamically -- div class=green clock/div !-- This div holds the value of the unit monitored - seconds, minutes or hours -- div class=display/div !-- A black area that hides the underlying background -- div class=front left/div !-- The left part of the background: -- div class=rotate left div class=bg left/div /div !-- The right part of the background: -- div class=rotate right div class=bg right/div /div /div 此代码是包含在jquery.tzineClock / jquery.tzineClock.js。他被调用三次 – 小时，分，秒。这些都是后来的动画和每一秒的运动（您等会儿就能看到这一点）。 在产生代码的过程中，有3个类被分配在的最顶层容器 – 绿色，蓝色和橙色。只要通过指定的这些类的参数，我们就能改变这些层的颜色。 让我们继续下一个步骤。 CSS 首先，我们必须在在网页的头部分包含以下文件： demo.html link rel=stylesheet type=text/css href=styles.css / link rel=stylesheet type=text/css href=jquery.tzineClock/jquery.tzineClock.css / 以上的代码将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 *