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

2024-10-15 13:15:25

废话不多说了，先给大家展示下效果图，感兴趣的朋友继续往下看哦

查看演示源码下载

HTML

和上一篇文章：使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构，只是多了个>date用来展示日期和星期的。

<div id="clock" class="light">
 <div class="display">
  <div class="date"></div>
  <div class="digits"></div>
 </div>
</div>

jQuery

CSS代码请参照上一篇文章，本文不再啰嗦，直接看jQuery代码。

首先我们定义参数，定义用来调用数字的class名称数组，定义中文星期名称，定义时分秒的位置。

$(function(){
 var clock = $('#clock');
 //定义数字数组0-9
 var digit_to_name = ['zero','one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
 //定义星期
 var weekday = ['周日','周一','周二','周三','周四','周五','周六'];
 var digits = {};
 //定义时分秒位置
 var positions = [
  'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
 ];
});

然后构建数字时钟的时分秒。在上一篇文章中我们是直接在html中放置了数字时钟的html结构，而现在我们使用jQuery来处理时钟的展示，通过append()方法来构建数字时钟。

var digit_holder = clock.find('.digits');
 $.each(positions, function(){
  if(this == ':'){
   digit_holder.append('<div class="dots">');
  }
  else{
   var pos = $('<div>');
   for(var i=1; i<8; i++){
    pos.append('<span class="d' + i + '">');
   }
   digits[this] = pos;
   digit_holder.append(pos);
  }
 });

最后，我们要让时钟跑起来。每秒钟调用一次update_time()函数，在update_time()中，我们先用moment.js来格式化时间，关于moment.js的介绍请参照本站文章：使用moment.js轻松管理日期和时间。然后根据当前时分秒，分别设置时分秒数字的class属性，即显示当前时分秒数字。接着继续使用moment.js来格式化日期和星期，最终完成了会走动的数字时钟，请看下面代码：

$(function(){
 ...
 (function update_time(){
  //调用moment.js来格式化时间
  var now = moment().format("HHmmss");
  digits.h1.attr('class', digit_to_name[now[0]]);
  digits.h2.attr('class', digit_to_name[now[1]]);
  digits.m1.attr('class', digit_to_name[now[2]]);
  digits.m2.attr('class', digit_to_name[now[3]]);
  digits.s1.attr('class', digit_to_name[now[4]]);
  digits.s2.attr('class', digit_to_name[now[5]]);
  var date = moment().format("YYYY年MM月DD日");
  var week = weekday[moment().format('d')];
  $(".date").html(date + ' ' + week);
  // 每秒钟运行一次
  setTimeout(update_time, 1000);
 })();
});

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相结合实现时钟插件

废话不多说了,直接给大家贴代码了. 效果图如下所示: 简洁代码如下: <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+css实现的时钟效果(兼容各浏览器)

本文实例讲述了jQuery+css实现的时钟效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 这里没有做太多的修饰,简单的实现了一下功能,另外,用的是js的setTimeout方法,当时间长了之后,会有一定的延时,建议,在每隔多少分钟执行一次时钟校准!哈哈,都有误差的嘛,反正我是没给你校. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.
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模拟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超酷平面式时钟效果代码.分享给大家供大家参考.具体如下: jQuery制作的超酷平面式时钟效果,把日期和时间通过横向刻度条展现,经测试效果非常酷,是一个很不错的学习实例. 这里我们还要提到之前实现的另一个特别新颖的时间显示样式:js实现温度计时间样式,两者都完全突破了传统的时钟概念,感兴趣的各位可不要错过了哈. 运行效果图:----------------------查看效果下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)

先给大家展示效果图,感兴趣的朋友可以下载源码哦. 效果演示源码下载数字时钟可以应用在一些WEB倒计时效果.WEB闹钟效果以及基于HTML5的WEB APP中,本文将给大家介绍不借助任何图片,如何使用CSS3和HTML来制作一个非常漂亮的数字时钟效果. HTML 我们先在页面中准备一个时钟区域#clock,并且要展示的数字放在.digits中. <div id="clock" class="light"> <div class=&
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可设置闹钟并且会语音提醒的时钟特效.分享给大家供大家参考.具体如下: 这是一款基于Jquery+html5实现可设置闹钟并且会语音提醒的时钟特效代码,超逼真的模拟时钟,最大的特点还可以语音提醒,感兴趣的小伙伴们快来研究研究. 运行效果图:-------------------查看效果下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的Jquery+html5实现可设置闹钟并且会语音提醒的时钟
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)

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

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

先给大家展示下效果图,喜欢的朋友可以下载源码哦效果演示源码下载 <section class="main"> <div class="wrapper-demo"> <div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span>手册网</span> <ul class="
基于C#生成条形码操作知识汇总附源码下载

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

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

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

基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 效果图如下所示,怎么样感兴趣吗,感兴趣的朋友继续往下学习哦. 效果演示源码下载 html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscree
基于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交互体验社会化分享代码.这是一款鼠标点击分享按钮向右滑出腾讯微博,新浪微博,QQ空间,豆瓣,微信,二维码分享等分享平台. html代码: <div style="text-align:center;font:normal 14px/24px 'MicroSoft YaHei';clear:both;width:160px;margin:0 auto;"&

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

相关推荐

随机推荐