CSS实现钟表

最新推荐文章于 2024-07-29 11:53:27 发布

帆仔哟

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量268

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/FanZaiYo/article/details/123862850

版权


			/* 定位属性 相对行为relative 绝对定位absolute 固定定位fixed
            /* 相对定位 
            1.是相对于自身原来的位置 
            2.还占据原来的位置 */
            /* position: relative;
            bottom: 10px;
            left: 10px; */
            /* 绝对定位 
            1.相对于有定位属性的父元素 
            2.失去原来位置 */
            /* position: absolute;
            bottom: 10px;
            left: 10px; */
            /* 固定定位
            1.相对于浏览器窗口
            2.失去原来位置*/
            /* 父相子绝 */
            /* position: fixed;
            bottom: 10px;
            right: 10px; */


<!DOCTYPE html>
<html>
<head>
	<title>时钟</title>
</head>
<style type="text/css">
    *{
    	/* 全局变量 设置外边距内边距为0 */
		margin: 0;
		padding: 0;
	}
		/* ul下取消原本样式 */
	ul{
		list-style: none;
	}
	.box{
        /* 设置宽高 */
		width: 500px;
		height: 500px;
        /* 外边距 上下30像素 左右自适应 */
		margin: 30px auto;
        /* 边框弧度50% */
		border-radius: 50%;
        /* 边框 2像素 实线 黑色 */
		border: 2px solid black;
        /* 相对定位 */
		position: relative;
	}
	/* box父类下的ul */
	.box ul{
		width: 100%;height: 100%;
        /* 相对定位 */
		position: relative;
	}
	/*竖线的样式 让旋转角度初始到表的中点*/
	.box ul li{
        /* 设置宽高 */
		width: 4px;
        height: 10px;
        /* 背景色 */
        background-color: black;
        /* 绝对定位 */
        position: absolute;
        /* 下文解读 */
        transform-origin: center 250px; left:50%;
	}
	#hour{
    	/* 宽高属性 */
		width: 12px;
		height: 80px;
		/* 背景色 */
		background: black;
		/* 绝对定位 */
		position: absolute;
		top:50%;
        left: 50%;
        /* 外边框 上 左 下右 */
        margin:-80px 0 0 -6px;
		/* 下文解读 */
		transform-origin: center bottom;
	}
	#minu{
    	/* 宽高属性 */
		width: 8px;
		height: 140px;
		/* 背景色 */
		background: black;
		/* 绝对定位 */
		position: absolute;
		top:50%;
        left: 50%;
        /* 外边框 上 左 下右 */
        margin:-140px 0 0 -4px;
		/* 下文解读 */
		transform-origin: center bottom;
	}
	#sceo{
    	/* 宽高属性 */
		width: 4px;
		height: 180px;
		/* 背景色 */
		background: black;
		/* 绝对定位 */
		position: absolute;
		top:50%;
        left: 50%;
        /* 外边框 上 左 下右 */
        margin:-180px 0 0 -2px;
		/* 下文解读 */
		transform-origin: center bottom;
	}
	#ball{
    	/* 背景色 */
		background: black;
		/* 宽高属性 */
		width: 30px;
		height: 30px;
		/* 绝对定位 */
		position: absolute;
		left: 50%;
		top: 50%;
        /* 外边框 */
		margin: -15px;
		/* 边框弧度 */
		border-radius: 50%;
	}
</style>
<body>
	<div class="box">
		<ul>
			
		</ul>
		<div id = hour></div>
		<div id = minu></div>
		<div id = sceo></div>
		<div id = ball></div>
	</div>
</body>
<script type="text/javascript">
    // 获取上方的值
	var ul = document.querySelector("ul");
	var hour = document.querySelector("#hour");
	var minu = document.querySelector("#minu");
	var sceo = document.querySelector("#sceo");
	// 循环遍历
	for (var i = 0; i < 60; i++) {
		var li = document.createElement("li");
		li.style.transform = 'rotate('+(i*6)+'deg)';
		// 每隔5个生成大的竖线，区分整刻
		if (i%5===0) {
			li.style.height='20px';
		}
		ul.appendChild(li);
	}
	run();
	setInterval(run,1000);
	function run(){
		var date = new Date();
		var h = date.getHours();
		var m = date.getMinutes();
		var s = date.getSeconds();
		console.log(s);
		hour.style.transform = 'rotate('+(h*30+m/2)+'deg)';
		minu.style.transform = 'rotate('+(m*6)+'deg)';
		sceo.style.transform = 'rotate('+(s*6)+'deg)';
	}
</script>
</html>

帆仔哟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实现钟表

/* 定位属性相对行为relative 绝对定位absolute 固定定位fixed /* 相对定位 1.是相对于自身原来的位置 2.还占据原来的位置 */ /* position: relative; bottom: 10px; left: 10px; */ /* 绝对定位 1.相对于有定位属性的父...
复制链接

扫一扫