本篇内容主要讲解“如何使用jQuery和CSS3制作数字时钟”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用jQuery和CSS3制作数字时钟”吧!
数字时钟可以应用在一些WEB倒计时效果、WEB闹钟效果以及基于HTML5的WEB APP中，本文将给大家介绍不借助任何图片，如何使用CSS3和HTML来制作一个非常漂亮的数字时钟效果。
我们先在页面中准备一个时钟区域#clock，并且要展示的数字放在.digits中。
<p id="clock" class="light">
<p class="display">
<p class="digits">
...数字
</p>
</p>
</p>
我们准备展示的数字时钟格式HH:mm:ss，它由时分秒8个数字和2个分隔符“:”组成，数字是由7个短横杠组成，如数字8它由7个短横杠构成，我们在html里使用.d1~.d7七个span元素，通过CSS的来确定不同数字的显示效果。将以下代码加到上述.digits中，使用class的值从zero到nine表示数字0-9的样式，使用.dot表示间隔符号。
<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>
我们设置每个数字span的透明度为0，就是默认不可见，通过CSS3的:before和:after特性来使表示数字的横杠设置转角的效果。
#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;}
然后，我们将数字span元素对应的dl~d7，根据数字来确定哪根横杠显示或不显示，即设置其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;
}
最后根据demo提供完整的css文档完善代码，即可以看到一个漂亮的数字时钟，那么如何让数字时钟真正跑起来，请看我们在下一篇文章的介绍。
到此，相信大家对“如何使用jQuery和CSS3制作数字时钟”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
