<!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. 树莓派创建WiFi热点

    将代码clone到本地 git clone https://github.com/oblique/create_ap cd create_ap make install 安装依赖的库 有些源中可能使用 ...

  2. 关于dropout的有趣的进化论解释

    训练神经网络时,使用dropout技术来防止网络的过拟合.我们这里且不谈这个技术的细节,但就这项技术的有趣的生物进化论解释了解下.自然界的高等生物进化出了两性繁殖,其原因可以解释为使得变异的基因能散播 ...

  3. 微信小程序AES解密失败

    微信小程序分享群获取群id时后端接口返回"微信AES解密失败",后来定位到原因是服务端用于解密的session_key失效.用户获取到openID存在缓存后,就不会每次login获 ...

  4. PAT1070:Mooncake

    1070. Mooncake (25) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Mooncake is ...

  5. 对于spring中事务@Transactional注解的理解

    现在spring的配置都喜欢用注解,这边就说下@Transactional 一.如何开启@Transactional支持 要使用@Transactional,spring的配置文件applicatio ...

  6. maven重新导入，不能拉到最新jar包的问题

    需要删除本地jar,再重新reimport  pom.xml

  7. Linux时间子系统之三：jiffies

    1. jiffies背景介绍 jiffies记录了系统启动以来,经过了多少tick. 一个tick代表多长时间,在内核的CONFIG_HZ中定义.比如CONFIG_HZ=200,则一个jiffies对 ...

  8. 浅析mydumper

    Ⅰ.背景 mysqldump单线程备份,很慢 恢复慢,一张表一张表恢复, 如果备份了100G的数据,想恢复其中一个表,做不到(所有的表都在一个文件里) 所以推荐使用mydumper备份 备份并行,基于 ...

  9. EDM模板编写踩坑指南（非响应式，纯table有源码）

    如果问你table布局,你肯定会嗤之以鼻?什么table布局?不是早已经淘汰了吗?但是如果让你写EDM邮件模板,table布局相对来说是最好的选择. 如果让你立刻写EDM,你在网上搜的话,得到的信息相 ...

  10. CSS float:right 在IE浏览器下换行

    在换行的html标签内加如下样式 style="right: 0px; position: absolute;"