基于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 相关文章推荐
jQuery实战之品牌展示列表效果
Apr 10 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
微信小程序如何获取地址
Dec 24 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
CocosCreator入门教程之网络通信
Apr 16 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
php5.2.0内存管理改进
2007/01/22 PHP
php自动适应范围的分页代码
2008/08/05 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
浅析vue数据绑定
2017/01/17 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
Python带动态参数功能的sqlite工具类
2018/05/26 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
python多进程间通信代码实例
2019/09/30 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
幼儿园植树节活动总结
2014/07/04 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL