源码：

<!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章 同步设备IO与异步设备IO

    Github https://github.com/gongluck/Windows-Core-Program.git //第10章 同步设备IO与异步设备IO.cpp: 定义应用程序的入口点. // ...

  2. 笔记：BroadcastReceiver的运行过程

    广播概述 广播用来在组件之间传递消息,可以是同进程或跨进程. 广播机制是基于发布订阅的事件驱动模型,使用上比Binder通信(跨进程接口回调)更低耦合.简单. ActivityManagerServi ...

  3. redis 分布式读写锁

    http://zhangtielei.com/posts/blog-redlock-reasoning.html 链接里这篇 blog 讨论了 redis 分布式锁的实现以及安全性 我要参考 基于单R ...

  4. Java学习笔记38（字符流）

    字符输出流:Writer类:使用时候需要它的子类 局限性:只能写文本文件,无法写其他文件 方法: package demo; import java.io.FileWriter; import jav ...

  5. vue 自学项目笔记

    感觉小青推荐的学习网课,  利用vue 仿制一个去哪网, 学习的东西很多, 在食用之前,需要先确保js 和css 过关 js https://www.bilibili.com/video/av3009 ...

  6. (转)Linux内核参数之arp_ignore和arp_announce

    原文:https://blog.csdn.net/ccy19910925/article/details/79960599 一.arp_ignore和arp_announce介绍 arp_ignore ...

  7. 取消vim打开文件全是黄色方法

    如下图: 取消方法: 按下esc键 :nohl 回车

  8. Oracle Database 12c Release 2安装过程实录

    前言----------公司数据库用的是oracle,由于oracle数据库没有做监控,所有搭个环境用于测试zabbix通过orabbix插件监控oracle数据库,下面先搭建oracle数据库. 简 ...

  9. Android模拟微信主页面的Demo

    Android模拟微信主页面的Demo 效果图如下: 项目结构图如下: ContanctFragment: package com.demo.moniwexin; import android.app ...

  10. Appium+Python 自动化-appium常用元素定位方法

    https://www.cnblogs.com/rabbit-testing/p/8042733.html 大牛 https://blog.csdn.net/kaka1121/article/deta ...