当前位置: 萬仟网 > IT编程>网页制作>CSS > h5实现实时时钟

h5实现实时时钟

2019年04月14日 07:26  | 萬仟网IT编程  | 我要评论
<!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>

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

  • VueRouter认识

    1、 什么是路由? 注意:作为vue的插件,需要单独引入js文件,且必须在vue.js之后引入。 <router-link to=“跳转路径”... [阅读全文]
  • 零基础:如何快速学习JavaScript,html+css技术

    前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML、CSS和JavaScript这些基础知识点,但达妹今天想强调一下,学前端开发除了要学这些... [阅读全文]
  • Web基础--HTML、Css

    Web基础--HTML、Css

    一、Web项目(可跳过,直接从下一个标题开始) 1、Web项目: 指的是带网页的项目,通过浏览器可以访问的项目。比如:淘宝、天猫等。 2、Web项目... [阅读全文]
  • CSS是什么

    css是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标... [阅读全文]
  • vue初级使用

    一、Vue是什么? Vue(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vu... [阅读全文]
  • HTML连载21-序选择器上

    HTML连载21-序选择器上

    解释CSS3 中新增的选择器中最具有代表性的就是序选择器,大致可以分为两类: (1)同级别的第几个(2)同类型的第几个 先写一个公共代码 1.选中同... [阅读全文]
  • 哪些技术会决定前端开发者的未来发展?

    哪些技术会决定前端开发者的未来发展?

    2019年下半年即将到来,上半年狂风骤雨般的裁员浪潮让每一位从业者背脊发凉,在经历了五六年黄金发展期之后,前端开发这个行业似乎也进入了转折点。 我一... [阅读全文]
  • 关于阿里 iconfont 的使用步骤

    关于阿里 iconfont 的使用步骤

    第一步: 在iconfont库中,找到你想要的图标,加入到购物车,再在购物车中将图标加入到你的项目中去 第二步: 在项目中,可以看到刚刚加入的图标,... [阅读全文]
  • flex 布局学习

    flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看... [阅读全文]
  • web前端布局HTML+CSS

    web前端布局HTML+CSS

    1、W3C标准 万维网联盟(外语缩写:W3C)标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Pr... [阅读全文]

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com