<!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. C Primer Plus 第9章 函数 编程练习

    复习题: 8. int choice(int a,int b,int c){ int max; max = a; if (b > max) max = b; if (c > max) ma ...

  2. 6个常见的php安全攻击

    1.SQL注入 SQL注入是一种恶意攻击,用户利用在表单字段输入SQL语句的方式来影响正常的SQL执行.还有一种是通过system()或exec()命令注入的,它具有相同的SQL注入机制,但只针对sh ...

  3. springboot+activemq中引入重发机制

    一.简介 在使用activemq消息中间件进行消息队列传输时,总会由于各种原因导致消息失败. 一个经典的场景是一个生成者向Queue中发消息,里面包含了一组邮件地址和邮件内容.而消费者从Queue中将 ...

  4. 注解@EnableDiscoveryClient，@EnableEurekaClient的区别

    SpringCLoud中的"Discovery Service"有多种实现,比如:eureka, consul, zookeeper. 1,@EnableDiscoveryClie ...

  5. float的范围和有效位

    首先说一下: 范围是3.4E-38 ——3.4E+38,可提供7位有效数字. 上述这两个量都是近似值,各个编译器不太一样的. 下面我就将标准值是怎么定义的,和你说一下: 这个比较复杂,建议你找一下IE ...

  6. centos6.9 升级内核版本

    想在centos6.9上安装docket,不过因为内核版本是2.6的故而想升级到最新的内核版本 晚上有编译升级的比较麻烦,不过有助于理解内核升级,我使用的直接升级到最新版方法 1. 导入public ...

  7. jmeter 监听器聚合报告说明：

    Label:表示定义HTTP请求名称 Samples:表示这次测试中一共发出了多少个请求. Average:平均响应时长---默认情况下是单个Request的平均响应时长,当使用了Transactio ...

  8. 按钮组，导航条选中其中一个后添加Class突出元素

    $(document).on("click",".modalnavtop",function(e){ $(".modalnavtop").e ...

  9. 接口测试返回的json文件中字符串是乱序

    问题描述 接口测试中post方式匹配返回信息时显示不匹配, 但是statuscode明明是200, 而且用postman /restclient等工具测出来也是没问题的. 根本原因 封装了这么个方法来 ...

  10. 关于top命令的使用

    在服务器运维过程中,我们有时需要知道当前状态下的系统运行性能,该如何获取呢?今天,咱们聊一下关于top这个小命令的一些知识. top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资 ...