源码：

<!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. Servlet的补充知识

    ServletContextAware是获取ServletContext一个接口.只需要实现此接口重写里面的setServletContext方法,spring在初始化的时候通过xmlClasspat ...

  2. Unix时间戳转日期时间格式，C#、Java、Python各语言实现！

    之前有个Q上好友没事问我,怎么自己写Unix时间戳转日期时间?于是我就顺手写了个C#版本给他!最近想起来,就萌发多写几个语言的版本分享,权当练习思路外加熟悉另外两种语言. 先说转换步骤 先处理年份,从 ...

  3. visual studio单项目一次生成多框架类库、多框架项目合并

    目录 不同平台框架项目使用同一套代码,一次编译生成多个框架类库 需要先了解的东西 分析 添加PropertyGroup 多目标平台 编译符号和输出目录设置 添加依赖 代码文件处理 主副平台项目文件处理 ...

  4. WPF 通过线程使用ProcessBar

    WPF下使用进度条也是非常方便的,如果直接采用循环然后给ProcessBar赋值,理论上是没有问题的,不过这样会卡主主UI线程,我们看到的效果等全部都结束循环后才出现最后的值. 所以需要采用线程或者后 ...

  5. 微服务应用新趋势：Service Mesh、AIOps和中台化

    微服务技术由于天生支持快速迭代.弹性扩展的特点,使企业能够在不确定性下提升发展速度及抗风险能力,受到了越来越多的关注.当前,云服务商纷纷试水微服务产品,最为典型的,当属推出轻舟微服务平台.剑指整个微服 ...

  6. CPU Hardwar

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

  7. javascript从作用域到闭包-笔记

    读<你不知道的javascript>一书做个笔记;编译原理:    js是一门编译型的语言,与传统编译语言类似,传统编译的过程分为三个阶段 ;     1. 分词/词法分析; 2.解析/语 ...

  8. React.js 三周 -- 入门到搭建团队基础项目

    吐槽 公司自己的产品,由于历史遗留问题,前端一直是和java放到一个项目里写的. 导致了,前端就被死死的绑在了IDEA战车上.想要看页面效果,先起几个java服务.想要调试一个改动,重启个java服务 ...

  9. location-alias

    location /images/ { alias /project/pic/; } 给定的路径对应于location的"/url" 这个URL; /images/f.jpg -- ...

  10. lombok的介绍及使用

    参考:https://blog.csdn.net/motui/article/details/79012846 介绍 在项目中使用Lombok可以减少很多重复代码的书写.比如说getter/sette ...