基于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 相关文章推荐
OfflineSave离线保存代码再次发布使用说明
May 23 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 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
Sony CFR 320 修复改造
2020/03/14 无线电
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
一个基于jquery的文本框记数器
2012/09/19 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
JQuery基础语法小结
2015/02/27 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
详解Node.js开发中的express-session
2017/05/19 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
Python教程之全局变量用法
2016/06/27 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Python 处理图片像素点的实例
2019/01/08 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
美国时尚在线:Showpo
2017/09/08 全球购物
论文诚信承诺书
2014/05/23 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android