基于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设置IFRAME的SRC值的代码
Nov 30 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 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开发模式(简写版)
2007/03/15 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
PHP 断点续传实例详解
2017/11/11 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
pandas object格式转float64格式的方法
2018/04/10 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
创业计划书怎样才能打动风投
2014/01/01 职场文书
班级心理活动总结
2014/07/04 职场文书
小学安全汇报材料
2014/08/14 职场文书
颐和园的导游词
2015/01/30 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
特种设备安全管理制度
2015/08/06 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby