如何使用jQuery和CSS3制作數(shù)字時(shí)鐘

本篇內(nèi)容主要講解“如何使用jQuery和CSS3制作數(shù)字時(shí)鐘”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何使用jQuery和CSS3制作數(shù)字時(shí)鐘”吧!

數(shù)字時(shí)鐘可以應(yīng)用在一些WEB倒計(jì)時(shí)效果、WEB鬧鐘效果以及基于HTML5的WEB APP中，本文將給大家介紹不借助任何圖片，如何使用CSS3和HTML來制作一個(gè)非常漂亮的數(shù)字時(shí)鐘效果。

HTML

我們先在頁面中準(zhǔn)備一個(gè)時(shí)鐘區(qū)域#clock，并且要展示的數(shù)字放在.digits中。

<p id="clock" class="light"> <p class="display"> <p class="digits">            ...數(shù)字        </p>    </p> </p>

我們準(zhǔn)備展示的數(shù)字時(shí)鐘格式HH:mm:ss，它由時(shí)分秒8個(gè)數(shù)字和2個(gè)分隔符“:”組成，數(shù)字是由7個(gè)短橫杠組成，如數(shù)字8它由7個(gè)短橫杠構(gòu)成，我們?cè)趆tml里使用.d1~.d7七個(gè)span元素，通過CSS的來確定不同數(shù)字的顯示效果。將以下代碼加到上述.digits中，使用class的值從zero到nine表示數(shù)字0-9的樣式，使用.dot表示間隔符號(hào)。

<p 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> </p>

CSS3

我們?cè)O(shè)置每個(gè)數(shù)字span的透明度為0，就是默認(rèn)不可見，通過CSS3的:before和:after特性來使表示數(shù)字的橫杠設(shè)置轉(zhuǎn)角的效果。

#clock .digits p{ text-align:left; position:relative; width: 28px; height:50px; display:inline-block; margin:0 4px; } #clock .digits p span{ opacity:0; position:absolute; -webkit-transition:0.25s; -moz-transition:0.25s; transition:0.25s; } #clock .digits p span:before, #clock .digits p 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;}

然后，我們將數(shù)字span元素對(duì)應(yīng)的dl~d7，根據(jù)數(shù)字來確定哪根橫杠顯示或不顯示，即設(shè)置其opacity的值為1。

/* 0 */ #clock .digits p.zero .d1, #clock .digits p.zero .d3, #clock .digits p.zero .d4, #clock .digits p.zero .d5, #clock .digits p.zero .d6, #clock .digits p.zero .d7{ opacity:1; }

最后根據(jù)demo提供完整的css文檔完善代碼，即可以看到一個(gè)漂亮的數(shù)字時(shí)鐘，那么如何讓數(shù)字時(shí)鐘真正跑起來，請(qǐng)看我們?cè)谙乱黄恼碌慕榻B。

到此，相信大家對(duì)“如何使用jQuery和CSS3制作數(shù)字時(shí)鐘”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！