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

赞 (0)

相关推荐

  • jquery模拟LCD 时钟的html文件源代码

    以下是HTML文件源代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title

  • jquery制作图片时钟特效

    jquery制作图片时钟特效

    一.生成数字时钟 <script src="http://code.jquery.com/jquery-latest.js"></script> <script> window.onload=function(){ var oBody=document.body; var oP=document.getElementById("time"); setInterval(fnTime,1000); fnTime(); function

  • jquery制作LED 时钟特效

    以下是HTML文件源代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title

  • jquery+html5制作超酷的圆盘时钟表

    jquery+html5制作超酷的圆盘时钟表

    自己封装的一个用HTML5+jQuery写的时钟表 代码: <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

  • jQuery CSS3相结合实现时钟插件

    jQuery CSS3相结合实现时钟插件

    废话不多说了,直接给大家贴代码了. 效果图如下所示: 简洁代码如下: <link rel="stylesheet" href="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.css" /> <script src="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></scri

  • jQuery超酷平面式时钟效果代码分享

    本文实例讲述了jQuery超酷平面式时钟效果代码.分享给大家供大家参考.具体如下: jQuery制作的超酷平面式时钟效果,把日期和时间通过横向刻度条展现,经测试效果非常酷,是一个很不错的学习实例. 这里我们还要提到之前实现的另一个特别新颖的时间显示样式:js实现温度计时间样式,两者都完全突破了传统的时钟概念,感兴趣的各位可不要错过了哈. 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以

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

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

    废话不多说了,先给大家展示下效果图,感兴趣的朋友继续往下看 哦 查看演示       源码下载 HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" class="light"> <div class="display"> <div class="date"></

  • jQuery+css实现的时钟效果(兼容各浏览器)

    jQuery+css实现的时钟效果(兼容各浏览器)

    本文实例讲述了jQuery+css实现的时钟效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 这里没有做太多的修饰,简单的实现了一下功能,另外,用的是js的setTimeout方法,当时间长了之后,会有一定的延时,建议,在每隔多少分钟执行一次时钟校准!哈哈,都有误差的嘛,反正我是没给你校. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.

  • 时钟Jquery+html5特效代码分享（可设置闹钟并且语音提醒）

    时钟Jquery+html5特效代码分享（可设置闹钟并且语音提醒）

    本文实例讲述了Jquery+html5可设置闹钟并且会语音提醒的时钟特效.分享给大家供大家参考.具体如下: 这是一款基于Jquery+html5实现可设置闹钟并且会语音提醒的时钟特效代码,超逼真的模拟时钟,最大的特点还可以语音提醒,感兴趣的小伙伴们快来研究研究. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的Jquery+html5实现可设置闹钟并且会语音提醒的时钟

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

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

    先给大家展示效果图,感兴趣的朋友可以下载源码哦. 效果演示         源码下载 数字时钟可以应用在一些WEB倒计时效果.WEB闹钟效果以及基于HTML5的WEB APP中,本文将给大家介绍不借助任何图片,如何使用CSS3和HTML来制作一个非常漂亮的数字时钟效果. HTML 我们先在页面中准备一个时钟区域#clock,并且要展示的数字放在.digits中. <div id="clock" class="light"> <div class=&

  • 基于JavaScript实现添加到购物车效果附源码下载

    基于JavaScript实现添加到购物车效果附源码下载

    我们有很多种方法实现将商品添加到购物车,通常的做法是点击"添加到购物车"按钮,会跳转到购物车,在购物车里可以点击"结算"按钮进行结算.而今天我给大家介绍一个更友好的解决方案. 查看演示 下载源码 默认情况下,购物车是隐藏不可见的,当用户点击添加到购物车按钮后,商品信息会添加到购物车,购物车会以按钮的形式出现在页面右下角,点击按钮则会展开购物车,显示购物车中的商品信息,同时也可以对购物车中的商品进行删除或者结算等操作.用户也可以暂时关闭购物车继续购物. HTML结构

  • jQuery 自定义下拉框(DropDown)附源码下载

    jQuery 自定义下拉框(DropDown)附源码下载

    先给大家展示下效果图,喜欢的朋友可以下载源码哦 效果演示   源码下载 <section class="main"> <div class="wrapper-demo"> <div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span>手册网</span> <ul class="

  • 基于C#生成条形码操作知识汇总附源码下载

    基于C#生成条形码操作知识汇总附源码下载

    1. 介绍 1.1 条形码 条形码(barcode):是将宽度不等的多个黑条和空白,按照一定的编码规则排列,用以表达一组信息的图形标识符. 1.2 条形码分类 可分为一维条形码和二维条形码: 一维条形码:只是在一个方向(一般是水平方向)表达信息,而在垂直方向则不表达任何信息. 二维条形码:在水平和垂直方向的二维空间存储信息的条形码. 1.3 第三方类库:ZXing.Net 1.3.1 说明 ZXing 是一个可生成和读取 1D/2D(1维/2维) 条形码的开源类库.原先是Java版本,后由第三方

  • 纯HTML5制作围住神经猫游戏-附源码下载

    纯HTML5制作围住神经猫游戏-附源码下载

    HTML5围住神经猫游戏网页版是一款基于HTML5.jquery.Typescript等技术制作的围住神经猫游戏. 先给大家附上演示和源码下载,点击这里  查看演示   下载源码 去年风靡微信朋友圈的小游戏"围住神经猫",我也试着做了一下.游戏是用Egret引擎开发的,因为Egret是用Typescript语言构建的,因此这里游戏也是用Typescript来开发的. 游戏规则: 点击画面上的灰色格子,慢慢将神经猫围起来抓住.如果猫到达游戏区边缘则游戏失败. 准备素材 在网上搜索&quo

  • 基于JS绘制2021的烟花效果 附源码下载

    基于JS绘制2021的烟花效果 附源码下载

    该作品是运用到了前端开发的知识内容(JS内容),但是运用到了前段比较后面的知识了,该作品可以用做网页设计的背景是一个不错的选择,以下式该程序运行的效果图,HTML,CSS中多部分的运用与设置,就是单词的字面意思 以下是该作品呈现的效果图: 调用JS使用时,JS里面的内容不需要做过多的研究与了解,只需给你一个JS文件会调用即可,但是HTML,CSS的内容中的至少的单词要知道意思与会运用,以下是HTML部分中的代码(主要还是调用后缀为JS的文件里的内容) <!DOCTYPE html> <h

  • 基于Jquery制作图片文字排版预览效果附源码下载

    基于Jquery制作图片文字排版预览效果附源码下载

    基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 效果图如下所示,怎么样感兴趣吗,感兴趣的朋友继续往下学习哦. 效果演示    源码下载 html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscree

  • 基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)

    基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)

    这是一款漂亮简洁的CSS3价格表样式,该价格表基于Bootstrap网格系统来进行布局,通过简单的CSS3代码来美化价格表,样式非常的时尚漂亮,且能在不同屏幕下展示良好的效果. 查看演示     下载源码 HTML 首先在页面中引入bootstrap.min.css文件,这里我用官方的CDN资源,你也可以下载到本地使用. <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstra

  • 基于jQuery实现交互体验社会化分享代码附源码下载

    基于jQuery实现交互体验社会化分享代码附源码下载

    先给大家展示下效果图,看看是不是亲想要的效果,如果满足您的要求请继续往下阅读. 效果展示       源码下载 基于jQuery交互体验社会化分享代码.这是一款鼠标点击分享按钮向右滑出腾讯微博,新浪微博,QQ空间,豆瓣,微信,二维码分享等分享平台. html代码: <div style="text-align:center;font:normal 14px/24px 'MicroSoft YaHei';clear:both;width:160px;margin:0 auto;"&

随机推荐