<!DOCTYPE html>

<html>

	<head>

	    <meta charset="UTF-8"/>

	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<title></title>

		<style>

			*{

				margin: 0px;

				padding: 0px;

			}

			.clock{

				width: 200px;

				height: 200px;

				border: 1px solid #000;

				border-radius: 50%;

				position: relative;

				margin: 20px;

				background-size: 100%;

			}

			.clock .hour{

				width: 10px;

				height: 70px;

				background: orange;

				position: absolute;

				left: 95px;

				top: 30px;

				/*animation: sec 86400s infinite;*/

			}

			.clock .minute{

				width: 6px;

				height: 80px;

				background: deepskyblue;

				position: absolute;

				left: 97px;

				top: 20px;

				/*animation: sec 3600s infinite;*/

			}

			.clock .second{

				width: 2px;

				height: 90px;

				background: red;

				position: absolute;

				left: 99px;

				top: 10px;

				/*animation: sec 60s infinite;*/

			}

			@keyframes sec{

				0%{transform-origin: center bottom;transform: rotate(0deg);}

				100%{transform-origin: center bottom;transform: rotate(360deg);}

			}

		</style>

	</head>

	<body>

		<div class="clock">

			<div class="hour"></div>

			<div class="minute"></div>

			<div class="second"></div>

		</div>

	</body>

	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

        <!--这里调用jquery是为了选取元素方便而已，初学建议用dom选取元素-->

	<script>

		function fn(){

		var myDate=new Date;

		var h=myDate.getHours();

		var m=myDate.getMinutes();

		var s=myDate.getSeconds();

		$(".clock .hour").css({"transform-origin":" center bottom","transform":"rotate("+30*h+"deg)"});

		$(".clock .minute").css({"transform-origin":" center bottom","transform":"rotate("+6*m+"deg)"});

		$(".clock .second").css({"transform-origin":" center bottom","transform":"rotate("+6*s+"deg)"});

		}

		fn();

		setInterval(fn,1000);

	</script>

</html>

h5实现实时时钟的更多相关文章

  1. ASM:《X86汇编语言-从实模式到保护模式》第9章：实模式下中断机制和实时时钟

    中断是处理器一个非常重要的工作机制.第9章是讲中断在实模式下如何工作,第17章是讲中断在保护模式下如何工作. ★PART1:外部硬件中断 外部硬件中断是通过两个信号线引入处理器内部的,这两条线分别叫N ...

  2. RTC实时时钟

    作者:宋老师,华清远见嵌入式学院讲师. 1.1 RTC介绍 在 一个嵌入式系统中,通常采用RTC 来提供可靠的系统时间,包括时分秒和年月日等,而且要求在系统处于关机状态下它也能够正常工作(通常采用后备 ...

  3. stm32——RTC实时时钟

    stm32——RTC实时时钟 一.关于时间 2038年问题 在计算机应用上,2038年问题可能会导致某些软件在2038年无法正常工作.所有使用UNIX时间表示时间的程序都将将受其影响,因为它们以自19 ...

  4. I2C实时时钟rx-8025板卡实际应用

    rx-8025是片外I2C实时时钟,其应用于9260板卡方法如下.总体思想是配置内核添加驱动(I2C驱动,内核已提供的很完备),板级文件添加设备,添加设备文件以应用程序操作. 1. 配置内核 1)I2 ...

  5. STM32F0xx_RTC实时时钟配置详细过程

    Ⅰ.概述 今天总结RTC(Real Time Clock)实时时钟相关的知识,顺带将BKP简单总结一下. STM32的RTC模块和时钟配置系统(RCC_BDCR寄存器)处于后备区域,即在系统复位或从待 ...

  6. linux 实时时钟（RTC）驱动【转】

    转自:http://blog.csdn.net/yaozhenguo2006/article/details/6820218 这个是linux内核文档关于rtc实时时钟部分的说明,此文档主要描述了rt ...

  7. 实时时钟、系统时钟和CPU时钟的区别

    http://blog.sina.com.cn/s/blog_68f909c30100pli7.html 实时时钟:RTC时钟,用于提供年.月.日.时.分.秒和星期等的实时时间信息,由后备电池供电,当 ...

  8. 【转】VxWorks中高精度实时时钟的实现及C语言汇编混合编程

    最近一个项目中需要在VxWorks下使用一个高精度实时时钟,要求精度为1ms,溢 出时间大于5小时.VxWorks提供系统时钟,该时钟在操作系统启动后开始计数,精度为1个tick,可以通过tickGe ...

  9. 第43章 RTC—实时时钟

    第43章     RTC—实时时钟 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fireg ...

随机推荐

  1. Quartz学习--二 Hello Quartz! 和源码分析

    Quartz学习--二  Hello Quartz! 和源码分析 三.  Hello Quartz! 我会跟着 第一章 6.2 的图来 进行同步代码编写 简单入门示例: 创建一个新的java普通工程 ...

  2. Web开发环境搭建 Eclipse-Java EE 篇

    Web开发环境搭建 Eclipse-Java EE 篇 [原创内容,转载注名出处] 1. 下载和安装 1.1 下载JDK 在Java官方网站下载最新版本的 Java SE:  http://www.o ...

  3. PAT1130:Infix Expression

    1130. Infix Expression (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Give ...

  4. maven中pom文件配置解决资源文件的编码问题

    <build> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId& ...

  5. CLR、程序集、反射和控制反转

    以前面试包括自己学习的时候经常会碰到这3个东西,也查过相关介绍,晦涩难懂,虽然看完之后,当时勉强理解,不过过一段时间又忘了.其实这篇文章可以分两篇(clr.程序集)和(反射.控制反转)来写,但它们之间 ...

  6. web页面中http返回的状态码解释

    状态码类别:   1xx: 信息类,表示客户发送的请求服务端正在处理   2xx:成功类,服务器 成功接收请求   3xx:重定向类,服务器中找到了多个请求内容,则需要用户再次操作选择   4xx:客 ...

  7. jQuery学习之旅 Item1 选择器【一】

    点击"名称"会跳转到此方法的jQuery官方说明文档. 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择I ...

  8. angularJS--多个控制器之间的数据共享

    为了在控制器之间共享数据,需要在服务中添加一个用来储存用户名的方法.记住,服务在 应用的生命周期内是单例模式的,因此可以将用户名安全地储存在其中. <!DOCTYPE html> < ...

  9. js判断对象是否为空

    /** *判断对象是否为空 * * @param e * @returns {Number} */function isEmptyObject(e) { var t; for (t in e) ret ...

  10. MAC下的mysql忘记密码该怎么办？？

    不要着急,不要慌,好多人会忙手忙脚,以为自己安装了一个假软件,其实是你打开的方式不对而已! step1: 苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务(点击 ...