源码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8"/>

		<title>Tutorial: How to Make a Digital Clock with jQuery & CSS3</title>

		<!-- The main CSS file -->

		<link href="assets/css/style.css" rel="stylesheet" />

		<!--[if lt IE 9]>

			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

		<![endif]-->

	</head>

	<body>

		<div id="clock" class="light">

			<div class="display">

				<div class="weekdays"></div>

				<div class="ampm"></div>

				<div class="alarm"></div>

				<div class="digits"></div>

			</div>

		</div>

		<div class="button-holder">

			<a class="button">Switch Theme</a>

		</div>

		<footer>

            <div style="text-align:center; font-weight:bold;"><a style="color:#2dbdf1;"href="http://www.100sucai.com">100sucai.com</a></div>

            <div id="tzine-actions"></div>

            <span class="close"></span>

        </footer>

		<!-- JavaScript Includes -->

		<script src="jquery.js"></script>

		<script src="moment.min.js"></script>

		<script src="assets/js/script.js"></script>

	</body>

</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. 背水一战 Windows 10 (82) - 用户和账号: 获取用户的信息, 获取用户的同意

    [源码下载] 背水一战 Windows 10 (82) - 用户和账号: 获取用户的信息, 获取用户的同意 作者:webabcd 介绍背水一战 Windows 10 之 用户和账号 获取用户的信息 获 ...

  2. 【接口时序】4、SPI总线的原理与Verilog实现

    一. 软件平台与硬件平台 软件平台: 1.操作系统:Windows-8.1 2.开发套件:ISE14.7 3.仿真工具:ModelSim-10.4-SE 硬件平台: 1. FPGA型号:Xilinx公 ...

  3. Android开发 - ImageView加载Base64编码的图片

    在我们开发应用的过程中,并不是所有情况下都请求图片的URL或者加载本地图片,有时我们需要加载Base64编码的图片.这种情况出现在服务端需要动态生成的图片,比如: 二维码 图形验证码 ... 这些应用 ...

  4. 【转】再有人问你Http协议是什么，把这篇文章发给他

    一.HTTP简介 1.HTTP协议,即超文本传输协议(Hypertext transfer protocol).是一种详细规定了浏览器和万维网(WWW = World Wide Web)服务器之间互相 ...

  5. 移动端IM开发者必读(二)：史上最全移动弱网络优化方法总结

    1.前言 本文接上篇<移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢”>,关于移动网络的主要特性,在上篇中已进行过详细地阐述,本文将针对上篇中提到的特性,结合我们的实践经 ...

  6. 功能强大的swiper插件

    概述 今天体验了一下swiper,真是太强大了,无论是PC端还是移动端,各种轮播滑块效果随便实现.美中不足的是,有些实现需要自己想办法.下面我记录下我的需求和我的实现,供以后开发时参考,相信对其他人也 ...

  7. Testing - 软件测试知识梳理 - 测试流程

    测试存在于各个阶段: 需求测试--->单元测试--->集成测试--->系统测试--->性能测试--->用户测试--->回归测试 需求测试 完整性&正确性 一 ...

  8. LeetCode: 106_Construct Binary Tree from Inorder and Postorder Traversal | 根据中序和后序遍历构建二叉树 | Medium

    要求:根据中序和后序遍历序列构建一棵二叉树 代码如下: struct TreeNode { int val; TreeNode *left; TreeNode *right; TreeNode(int ...

  9. jsp和servlet的关系

    JSP是Servlet技术的扩展,本质上就是Servlet的简易方式.JSP编译后是“类servlet”. Servlet和JSP最主要的不同点在于:Servlet的应用逻辑是在Java文件中,并且完 ...

  10. JavaScript中原型链的那些事

    引言 在面向对象的语言中继承是非常重要的概念,许多面向对象语言都支持两种继承方式:接口继承和实现继承.接口继承制只继承方法签名,而实现继承继承实际的方法.在ECMAScript中函数没有签名,所以EC ...