如何使用jQuery和CSS3制作数字时钟

文章目录

标记
index.html
资产/css/styles.css
jQuery代码
资产/js/script.js

标记

时钟不需要很多HTML。这是因为它的很大一部分（例如工作日的名称和数字的代码）是动态生成的。这是使用时钟需要在页面上具有的标记：

index.html

<div id = “ clock”  class = “ light” >
     < div  class = “ display” > 
        < div  class = “工作日” > </ div > 
        < div  class = “ ampm” > </ div > 
        < div  class = “警报” > </ div > 
        < div  class = “ digits” > </ div >
    </ div > 
< / div>

主要元素#clock div包含.display，该显示又包含工作日列表，AM / PM标签警报图标和时间。这是数字之一的生成标记：

<div class = “零” >
     < span  class = “ d1” > </ span > 
    <span class = “ d2” > </ span > 
    <span class = “ d3” > </ span > 
    <span class = “ d4 “ > </ span > 
    <span class = ” d5“ > </ span > 
    <span class = “ d6” ></ span > 
    <span class = “ d7” > </ span > 
< / div>

.digits元素将包含这些带有跨度的div中的6个，每个时间位数对应一个。从上面的片段中可以看到，这些div的类名从零到九（一秒钟会更多），并且包含七个具有唯一类的span元素。这些跨度是数字段，就像旧的数字时钟一样：

它们完全使用CSS设置样式，并且opacity:0默认设置为。分配给其父div的类使它们可见。这是零的CSS：

资产/css/styles.css

/ * 0 * / 

#clock  .digits  div .zero  .d1，
 #clock  .digits  div .zero  .d3，
 #  clock .digits  div .zero  .d4，
 #  clock .digits  div .zero  .d5，
 #  clock .digits  div .zero  .d6，
 #clock  .digits  div .zero  .d7 {
    不透明度：1 ; 
}

除中间部分外，其他所有部分均可见（否则为8）。我为所有这些跨度添加了CSS3过渡属性，该属性可在数字之间切换时为不透明度设置动画。

样式表中还有很多其他CSS，但在此不再赘述。我认为，了解CSS如何工作的最好方法是通过检查Firebug，Chrome的Inspector或所选浏览器的开发人员工具中的演示程序的实时代码。

jQuery代码

为了使时钟正常工作，我们将不得不使用jQuery为每个数字生成标记，并设置一个计时器以每秒更新一次类。为了使我们的生活更轻松，我们将使用moment.js库（快速技巧）来弥补缺少的JavaScript本机日期和时间函数。

资产/js/script.js

$（函数（） { //缓存一些选择器var clock = $（'#clock'），
        alarm = clock.find（'.alarm'），
        ampm = clock.find（'.ampm'）; //将数字映射到它们的名称（这将是一个数组）var digit_to_name = '零一二三四有五六七八有八' .split（''）; //此对象将包含数字元素var digits = {}; //时，分和秒的位置var position = [
         'h1'，'h2'，'：'，'
    'm2'，'：'，'s1'，'s2' 
    ]; //生成具有所需标记的数字，//并将它们添加到时钟中var digit_holder = clock.find（'.digits'）; 
    $ .each（位置，函数（

） { if（this == '：'）{ 
            digit_holder.append（'<div class =“ dots”>'）; 
        } else { var pos = $（'<div>'）; 对于（var i = 1 ; i < 8 ; i ++）{ 
                pos.append（'<span class =“ d' + i + '”>'）; 
            } //将数字设置为key：value对象对中的值对
            digits [ this ] = pos; //将数字元素添加到页面
        
            digit_holder.append（pos）; 
        } 

    }）; //添加工作日名称VAR weekday_names = '星期一星期二星期三星期四星期五星期六星期日' .split（'' ），
        weekday_holder = clock.find（” .weekdays'）; 
    $ .each（weekday_names，function（  
） { 
        weekday_holder.append（'<span>' + this + '</ span>'）; 
    }）; var weekdays = clock.find（'.weekdays span'）; //每秒运行一个计时器并更新时钟
    （函数update_time（
 ） { //使用moment.js以字符串形式输出当前时间// hh是12小时格式的小时，// mm-分钟，ss-seconds（均带有前导零），// d表示星期几，A代表AM / PM var now = moment（）。format（“ hhmmssdA”）; 
        digits.h1.attr（'class'，digit_to_name [now [ 0 ]]）; 
        digits.h2.attr（'class'，digit_to_name [now [ 1 ]]）; 
        digits.m1.attr（'class'，digit_to_name [now [ 2 ]]）; 
        digits.m2.attr（'class'，digit_to_name [now [ 3 ]]）;
        digits.s1.attr（'class'，digit_to_name [now [ 4 ]]）; 
        digits.s2.attr（'class'，digit_to_name [now [ 5 ]]）; //库返回星期日作为一周的第一天。//愚蠢，我知道。让我们将所有日期向下移动一个位置，//使星期日最后一个var dow = now [ 6 ]; 
        陶氏-; // 星期日！if（dow < 0）{
             //使它最后一次
            dow = 6 ; 
        } //标记一周中
        工作日（daydays.removeClass（'active'
        ）.eq（dow）.addClass（'active'）; //设置am / pm文本： 
        ampm.text（now [ 7 ] + now [ 8 ]）; //安排此函数在1秒钟内再次运行
        setTimeout（update_time，1000）; 
    }）（）; //切换主题
    $（'a.button'）.click（函数（
） { 
        clock.toggleClass（'light dark'）; 
    }）; 

}）;