源码：

<!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. MySQL性能调优与诊断

    * 本篇随笔为<涂抹MySQL>一书的阅读摘抄,详细请查看正版书籍 关键性指标 IOPS(Input/Output operations Per Second) 每秒处理的I/O请求次数 ...

  2. 程序猿的日常——工作中常用的Shell脚本

    工作当中总是会有很多常用的linux或者命令,这里就做一个总结 文件远程拷贝 如果想把文件从本机拷贝到远程,或者从远程下载文件到本地. # 把本地的jar拷贝到远程机器xxxip的/home/sour ...

  3. Linux - 变量的查看与设置

    printenv - print all or part of environment 显示所有变量:print 显示某个变量:print <variable name> 或者 echo ...

  4. HTML编辑器 -- KindEditor

    KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...

  5. postgresql-排序

    postgresql的排序. https://www.cnblogs.com/flying-tiger/p/8120046.html 1.是根据排序数据量的大小来判断,如果数据量少到能够整体放到内存的 ...

  6. 从svn下载项目，并在tomcat启动

    1.需要先在本地安装mysql,并且启动成功(配置环境变量.客户端等). 2.需要下载小乌龟,需要从svn上下载项目. 3.安装eclipse,并且在eclipse上下载项目,会下载成两个聚合项目,不 ...

  7. Java中IO流中的装饰设计模式(BufferReader的原理)

    本文粗略的介绍下JavaIO的整体框架,重在解释BufferReader/BufferWriter的演变过程和原理(对应的设计模式) 一.JavaIO的简介 流按操作数据分为两种:字节流与字符流. 流 ...

  8. (转)Python中操作mysql的pymysql模块详解

    原文:https://www.cnblogs.com/wt11/p/6141225.html https://shockerli.net/post/python3-pymysql/----Python ...

  9. .NET内存管理、垃圾回收

    1. Stack和Heap    每个线程对应一个stack,线程创建的时候CLR为其创建这个stack,stack主要作用是记录函数的执行情况.值类型变量(函数的参数.局部变量 等非成员变量)都分配 ...

  10. 全网最详细的IDEA里如何正确新建普通的Java web项目并发布到Tomcat上运行成功【博主强烈推荐】(类似eclipse里同一个workspace下【一个子项目】并存）（图文详解）

    不多说,直接上干货! 首先,大家要明确,IDEA.Eclipse和MyEclipse等编辑器之间的新建和运行手法是不一样的. 如果是在Myeclipse里,则是File -> new -> ...