基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)


Posted in Javascript onNovember 24, 2015

先给大家展示效果图,感兴趣的朋友可以下载源码哦。

基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)

效果演示         源码下载

数字时钟可以应用在一些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文档完善代码,即可以看到一个漂亮的数字时钟,那么如何让数字时钟真正跑起来,请看我们在下一篇文章的介绍。

Javascript 相关文章推荐
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
vue 授权获取微信openId操作
Nov 13 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 #Javascript
基于jquery实现简单的手风琴特效
Nov 24 #Javascript
jQuery插件实现无缝滚动特效
Nov 24 #Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 #Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 #Javascript
javascript实现加载xml文件的方法
Nov 24 #Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 #Javascript
You might like
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
php session的应用详细介绍
2017/03/22 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
Python中使用动态变量名的方法
2014/05/06 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
python中scikit-learn机器代码实例
2018/08/05 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
安全生产月演讲稿
2014/05/09 职场文书
销售员岗位职责范本
2015/04/11 职场文书
创业计划书之便利店
2019/09/05 职场文书
创业计划书之农家乐
2019/10/09 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
MySQL读取JSON转换的方式
2022/03/18 MySQL