基于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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 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下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
Javascript计算时间差的函数分享
2011/07/04 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
详解Django中的过滤器
2015/07/16 Python
Python中max函数用法实例分析
2015/07/17 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
Python实现中值滤波去噪方式
2019/12/18 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
Java的类与C++的类有什么不同
2014/01/18 面试题
市场部专员岗位职责
2013/11/30 职场文书
农村党员一句话承诺
2014/05/30 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
门面房租房协议书
2014/08/20 职场文书
小学生春游活动方案
2014/08/20 职场文书
元旦晚会开场白
2015/05/29 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
实验心得体会范文
2016/01/25 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python