<!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. 第六章 MySQL 查询

    查询数据表 语法: SELECT {* | <字段列表>} [ FROM <表1>, <表2>.... [ where <表达式> ] [ group ...

  2. windows下Redis的安装配置以及注意事项

    一.下载windows版本的Redis 去官网找了很久,发现原来在官网上可以下载的windows版本的,现在官网以及没有下载地址,只能在github上下载,官网只提供linux版本的下载 官网下载地址 ...

  3. HttpMessageConverter 专题

    配置HttpMessageConverterHttpMessageConverter是对http的request和response进行自动转换配置HttpMessageConverter可重载下面两个 ...

  4. selenium中浏览器及对应的驱动（可下载）

    https://blog.csdn.net/huilan_same/article/details/52615123,灰蓝大神的总结,可直接下载 下载chrome浏览器,查看版本 http://blo ...

  5. python资料分享

    python入门资料分享:链接:https://pan.baidu.com/s/1aATizMh5e0ON6xfmtxXPzA  密码:m8bf 提高资料:链接:https://pan.baidu.c ...

  6. Windows下SVN命令行工具使用详解

    根据我的记忆,似乎Windows 7下自自带一个svn命令行工具.如果你的机器没有,不必担心.你可以从http://subversion.tigris.org获 取subversion for win ...

  7. 解决mongodb的安装mongod命令不是内部或外部命令

    1:安装 去mongodb的官网http://www.mongodb.org/downloads下载32bit的包 解压后会出现以下文件 在安装的盘C:下建立mongodb文件夹,拷贝bin文件夹到该 ...

  8. 再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

    浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询.监听用户事件. 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览器特意的阻塞.两个很明 ...

  9. attr和prop的区别以及在企业开发中应该如何抉择

    attr和prop有很多相同的地方,比如都可以操作标签的属性节点,而且获取的时候都只可以获取到相同节点的第一个,例如这样: $('span').attr('class');和$('span').pro ...

  10. MySQL基本命令1

    在ubuntu系统中操作命令:登录:mysql -uroot -p启动:service mysql start停止:service mysql stop重启:service mysql restart ...