纯css+js实现在线时钟

最新推荐文章于 2021-06-16 01:37:51 发布

SeanHit

最新推荐文章于 2021-06-16 01:37:51 发布

阅读量470

点赞数 1

分类专栏：前端 css+html 文章标签： html html5 css3 javascript

本文链接：https://blog.csdn.net/l_x_cser/article/details/104450547

版权

前端 css+html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时钟</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.wrap{
				position: absolute;
				width: 200px;
				height: 200px;
				border: 2px solid;
				background-color: pink;
				border-radius: 50%;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
			.wrap>ul{
				list-style: none;
			}
			.wrap>ul>li{
				position: absolute;
				left: 99px;
				top: 0;
				width: 2px;
				height: 10px;
				background-color: black;
				transform-origin: center 100px;
			}
			.wrap>ul>li:nth-child(5n+1){
				height: 15px;
			}
			.wrap > .hour{
				position: absolute;
				left: 97px;
				top:70px ;
				width: 6px;
				height: 30px;
				background: black;
				transform-origin: center bottom;
			}
			.wrap > .min{
				position: absolute;
				left: 98px;
				top: 50px;
				width: 4px;
				height: 50px;
				background: gray;
				transform-origin: center bottom;
			}
			.wrap > .sec{
				position: absolute;
				left: 99px;
				top: 30px;
				width: 2px;
				height: 70px;
				background: red;
				transform-origin: center bottom;
			}
			.wrap > .center{
				position: absolute;
				left: 90px;
				top: 90px;
				width: 20px;
				height: 20px;
				border-radius:50% ;
				background: black;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul></ul>
			<div class="hour"></div>
			<div class="min"></div>
			<div class="sec"></div>
			<div class="center"></div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload =function(){
			var hourNode =document.querySelector(".wrap > .hour");
			var minNode =document.querySelector(".wrap > .min");
			var secNode =document.querySelector(".wrap > .sec");
			var ulNode =document.querySelector(".wrap>ul");
			var styleNode =document.createElement('style');
			var liHtml ='';
			var styleHtml ='';
			for(var i=0;i<60;i++){
				liHtml += "<li></li>";
				styleHtml+=".wrap>ul>li:nth-child("+(i+1)+"){transform: rotate("+(i*6)+"deg);}"
			}
			ulNode.innerHTML =liHtml;
			styleNode.innerHTML =styleHtml;
			document.querySelector('head').appendChild(styleNode);
			
			moveTime();
			setInterval(moveTime,1000);
			
			function moveTime(){
				var date =new Date();
				var sec =date.getSeconds();
				var min =date.getMinutes()+sec/60;
				var hour =date.getHours()+min/60;
				hourNode.style.transform ="rotate("+(hour*30)+"deg)";
				minNode.style.transform ="rotate("+(min*6)+"deg)";
				secNode.style.transform ="rotate("+(sec*6)+"deg)";
			}
			
		}
	</script>
</html>

在这里插入图片描述

实现要点

transform-origin的基本点的应用
批量处理html和样式的信息
指证位置进行了优化（时针与小时和分针位置有关，分针与分和秒针位置有关）。

新增居中方式：

开启绝对定位 left:50%;top :50%;transform:translate(50%,50%);

SeanHit

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css+js实现在线时钟

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>时钟</title> <style type="text/css"> *{ padding: 0; margin: 0; } .wrap{ ...
复制链接

扫一扫

专栏目录