使用jQuery和CSS3制作数字时钟(CSS3篇)

原文地址：http://www.helloweba.com/view-blog-273.html

数字时钟可以应用在一些WEB倒计时效果、WEB闹钟效果以及基于HTML5的WEB APP中，本文将给大家介绍不借助任何图片，如何使用CSS3和HTML来制作一个非常漂亮的数字时钟效果。

HTML

我们先在页面中准备一个时钟区域#clock，并且要展示的数字放在.digits中。

<div id="clock" class="light"> 
    <div class="display"> 
        <div class="digits"> 
            ...数字 
        </div> 
    </div> 
</div> 

我们准备展示的数字时钟格式HH:mm:ss，它由时分秒8个数字和2个分隔符“:”组成，数字是由7个短横杠组成，如数字8它由7个短横杠构成，我们在html里使用.d1~.d7七个span元素，通过CSS的来确定不同数字的显示效果。将以下代码加到上述.digits中，使用class的值从zero到nine表示数字0-9的样式，使用.dot表示间隔符号。

<div class="eight"> 
    <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> 

CSS3

我们设置每个数字span的透明度为0，就是默认不可见，通过CSS3的:before和:after特性来使表示数字的横杠设置转角的效果。

#clock .digits div{ 
    text-align:left; 
    position:relative; 
    width: 28px; 
    height:50px; 
    display:inline-block; 
    margin:0 4px; 
} 
 
#clock .digits div span{ 
    opacity:0; 
    position:absolute; 
 
    -webkit-transition:0.25s; 
    -moz-transition:0.25s; 
    transition:0.25s; 
} 
 
#clock .digits div span:before, 
#clock .digits div span:after{ 
    content:''; 
    position:absolute; 
    width:0; 
    height:0; 
    border:5px solid transparent; 
} 
 
#clock .digits .d1{            height:5px;width:16px;top:0;left:6px;} 
#clock .digits .d1:before{    border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;} 
#clock .digits .d1:after{    border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;} 

然后，我们将数字span元素对应的dl~d7，根据数字来确定哪根横杠显示或不显示，即设置其opacity的值为1。

/* 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{ 
    opacity:1; 
} 

最后根据demo提供完整的css文档完善代码，即可以看到一个漂亮的数字时钟，那么如何让数字时钟真正跑起来，请看我们在下一篇文章的介绍。

HTML

和上一篇文章：使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构，只是多了个>date用来展示日期和星期的。

<div id="clock" class="light"> 
    <div class="display"> 
        <div class="date"></div> 
        <div class="digits"></div> 
    </div> 
</div> 

jQuery

CSS代码请参照上一篇文章，本文不再啰嗦，直接看jQuery代码。

首先我们定义参数，定义用来调用数字的class名称数组，定义中文星期名称，定义时分秒的位置。

$(function(){ 
    var clock = $('#clock'); 
    //定义数字数组0-9 
    var digit_to_name = ['zero','one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine']; 
    //定义星期 
    var weekday = ['周日','周一','周二','周三','周四','周五','周六']; 
 
    var digits = {}; 
 
    //定义时分秒位置 
    var positions = [ 
        'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2' 
    ]; 
}); 

然后构建数字时钟的时分秒。在上一篇文章中我们是直接在html中放置了数字时钟的html结构，而现在我们使用jQuery来处理时钟的展示，通过append()方法来构建数字时钟。

    var digit_holder = clock.find('.digits'); 
 
    $.each(positions, function(){ 
        if(this == ':'){ 
            digit_holder.append('<div class="dots">'); 
        } 
        else{ 
            var pos = $('<div>'); 
 
            for(var i=1; i<8; i++){ 
                pos.append('<span class="d' + i + '">'); 
            } 
 
            digits[this] = pos; 
            digit_holder.append(pos); 
        } 
    }); 

最后，我们要让时钟跑起来。每秒钟调用一次update_time()函数，在update_time()中，我们先用moment.js来格式化时间，关于moment.js的介绍请参照本站文章：使用moment.js轻松管理日期和时间。然后根据当前时分秒，分别设置时分秒数字的class属性，即显示当前时分秒数字。接着继续使用moment.js来格式化日期和星期，最终完成了会走动的数字时钟，请看下面代码：

$(function(){ 
    ... 
    (function update_time(){ 
 
        //调用moment.js来格式化时间 
        var now = moment().format("HHmmss"); 
 
        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 date = moment().format("YYYY年MM月DD日"); 
        var week = weekday[moment().format('d')]; 
        $(".date").html(date + ' ' + week); 
 
 
        // 每秒钟运行一次 
        setTimeout(update_time, 1000); 
 
    })(); 
});