源码：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="utf-8"/>
  6. 		<title>Tutorial: How to Make a Digital Clock with jQuery & CSS3</title>
  7.  
  8. 		<!-- The main CSS file -->
  9. 		<link href="assets/css/style.css" rel="stylesheet" />
  10.  
  11. 		<!--[if lt IE 9]>
  12. 			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  13. 		<![endif]-->
  14. 	</head>
  15.  
  16. 	<body>
  17.  
  18. 		<div id="clock" class="light">
  19. 			<div class="display">
  20. 				<div class="weekdays"></div>
  21. 				<div class="ampm"></div>
  22. 				<div class="alarm"></div>
  23. 				<div class="digits"></div>
  24. 			</div>
  25. 		</div>
  26.  
  27. 		<div class="button-holder">
  28. 			<a class="button">Switch Theme</a>
  29. 		</div>
  30.  
  31. 		<footer>
  32.             <div style="text-align:center; font-weight:bold;"><a style="color:#2dbdf1;"href="http://www.100sucai.com">100sucai.com</a></div>
  33.             <div id="tzine-actions"></div>
  34.             <span class="close"></span>
  35.         </footer>
  36.  
  37. 		<!-- JavaScript Includes -->
  38. 		<script src="jquery.js"></script>
  39. 		<script src="moment.min.js"></script>
  40. 		<script src="assets/js/script.js"></script>
  41.  
  42. 	</body>
  43. </html>

　　

效果图：

演示地址：www.100sucai.com/code/27.html

通过jQuery制作电子时钟表的代码的更多相关文章

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

    自己封装的一个用HTML5+jQuery写的时钟表 代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ...

  2. [转]jQuery.validate插件在失去焦点时执行验证代码

    转:http://my.oschina.net/enyo/blog/311566 关于 jquery.validate.js 表单验证插件如何在失去焦点时做验证.看手册后发现默认是在表单提交时执行验证 ...

  3. [TPYBoard-Micropython之会python就能做硬件 3] 制作电子时钟

    转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.本次实验所需器材 1.TPYboard V102板  一块 2.DS3231 ...

  4. JQuery制作网页——第五章 初识 jQuery

    1.jQuery简介: ● jQuery由美国人John Resig于2006年创建 ● jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 ● 它的设计 ...

  5. jquery制作论坛或社交网站的每天打卡签到特效

    效果:http://hovertree.com/texiao/jquery/50/ 现在许多社区,购物等网站都设置签到功能,打开可以收获经验.虚拟币等,提高用户粘性,增加浏览量,是一个不错的功能.本文 ...

  6. 如何使用jQuery 制作全屏幕背景的嵌入视频

    实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...

  7. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  8. 通过javascript库JQuery实现页面跳转功能代码

    通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...

  9. jQuery制作Web全屏效果

    需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...

随机推荐

  1. Apache Phoenix Flume集成 -- JsonEventSerializer改进

    背景 数据从kafka ingest到Phoenix.数据格式采取Json.数据链路: api -> kafka -> Flume -> Phoenix 官方JsonEventSer ...

  2. CPU Hardwar

    GPU负责把线程块分配到各个SM上处理. CUDA对申请的线程块何时运行,以及在哪个SM上运行是没有保证的.这恰好是GPU的优势,这种方式带来了灵活性,不需程序根据SM的数量去配置程序. 但是一个bl ...

  3. what does GIT PUSH do exactly?

    有效理解 git 的对象模型 https://stackoverflow.com/questions/26005031/what-does-git-push-do-exactly 所谓分支, 就是一个 ...

  4. 在notepad++中使用正则匹配功能(一-龥！-～) 中文[利刃篇]

    用正则时间越久,人就越懒,就越知道正则的强大.正则,不只是在代码里用到,在字符查找是也会用到,学会适当使用正则,将会使你的工作事办功倍!但是,中文却是一个砍,不容易过. 于是在用notepad++,也 ...

  5. Java 9 被无情抛弃，Java 8 直接升级到 Java 10！！

    前几天写了一篇 Java 8 即将在 2019 年停止免费向企业提供更新的文章,企图迫使用户向更新一代的 Java 版本升级,但让人遗憾的是,小编今天收到了 Oracle Java 版本的升级推送,装 ...

  6. Win10手记-IIS部署网站问题解决

    最近在自己的Win10电脑上尝试部署ASP.NET网站时出现了问题,经过多方查找定位到IIS为问题来源. 开始之前 先描述下技术环境: 1.Windows 10 PC 2.Windows 自带的IIS ...

  7. Python基础教程(第3版) 笔记（一）

    1.1 数和表达式: 除法运算的结果为小数,即浮点数 >>>1/2 0.5 除法运算为整数,使用双斜杠 >>>1//2 0 >>>5.0//2.4 ...

  8. 微服务开发有道之把项目迁移到Kubernetes上的5个小技巧

    我们将在本文中提供5个诀窍帮你将项目迁移到Kubernetes上,这些诀窍来源于过去12个月中OpenFaas社区的经验.下文的内容与Kubernetes 1.8兼容,并且已经应用于OpenFaaS ...

  9. vue 父子组件之间传参

    父组件中有子组件 msg 为父组件向子组件传的内容,  子组件向父组件传参数 子组件:this.$emit("shownumber",[this.num]);//this.$emi ...

  10. git 简单命令总结

    一.本地仓库操作 1.构建本地仓库 初始化本地仓库,生成.git隐藏文件 $ git init 在文件夹内添加readme.md文件,执行如下命令,添加到本地仓库暂存区 $ git add readm ...