/* 定位属性 相对行为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>
因篇幅问题不能全部显示，请点此查看更多更全内容