<!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. 读取本地outlook邮件内容

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. 一种轻量级的微信小程序日志监控的方法

    今天一个活动要写个H5,明天一个功能要用小程序,天天都在写bug.用户反馈小程序用起来有问题还特么还不知道到底出了啥bug,反馈多了,老板要扣工资了!看来挖了太多坑不填也不行,程序异常还是要主动追踪, ...

  3. PyCharm下载及安装教程

    pycharm官网地址 https://www.jetbrains.com/pycharm/download/#section=windows 下载社区版 选择安装路径E:\Python\pychar ...

  4. SSM-MyBatis-11：Mybatis中查询全部用resultmap

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 实体类很普通,四个字段,编号,名字,作者名,价格 在接口中的方法声明如下 //查全部 public List& ...

  5. 一步一步实现HTTP服务器-开篇

    缘起 翻开清单,一条条计划一直列在那里,一天又一天,不知道什么时候写下了它,也知不道什么时候完成它,它一直在那静静的等待着. 静下心来,反思自己,才发现自己是多么的无知,多么的没有毅力.设定了无数目标 ...

  6. 聊一聊顺序消息（RocketMQ顺序消息的实现机制）

    当我们说顺序时,我们在说什么? 日常思维中,顺序大部分情况会和时间关联起来,即时间的先后表示事件的顺序关系. 比如事件A发生在下午3点一刻,而事件B发生在下午4点,那么我们认为事件A发生在事件B之前, ...

  7. Python Redis 的安装

    安装 可以去pypi上找到redis的Python模块: http://pypi.python.org/pypi?%3Aaction=search&term=redis&submit= ...

  8. Intellij Idea中如何debug本地maven项目

    方法一:使用maven中的jetty插件调试本地maven项目 1.打断点 2.右击"jetty:run",选择Debug运行 3.浏览器发送http请求,开始调试 方法二:利用远 ...

  9. 用Axure进行原型设计

    用Axure进行原型设计   看这个视频 http://www.iqiyi.com/playlist409963402.html

  10. linux.go

    func LockFile(file *os.File) error { return syscall.Flock(int(file.Fd()), syscall.LOCK_EX) }