<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>时钟 (调整排版)</title>
<style>
body {
margin: 0;
}
.wrapper {
width: 1200px;
/* margin: 0 auto; */
}
/* 时钟 */
.time {
width: 350px;
height: 350px;
border: 5px solid #ccc;
border-radius: 50%;
position: relative;
}
.time > div {
position: absolute;
left: 50%;
top: 50%;
/* 设置标签的旋转中心位置 */
transform-origin: center bottom;
}
/* 针 宽度不可以超过 175 */
.time #hour {
width:10px;
height: 80px;
background-color: #333;
/* 外边距 */
margin-top: -80px;
margin-left: -5px;
/* 旋转 */
transform: rotate(0deg);
}
.time #minute {
width:6px;
height: 120px;
background-color: green;
/* 外边距 */
margin-top: -120px;
margin-left:-3px;
/* 旋转 */
transform: rotate(0deg);
}
.time #second {
width: 4px;
height: 170px;
background-color: red;
/* 外边距 */
margin-top: -170px;
margin-left:-2px;
/* 旋转 */
transform: rotate(0deg);
}
.time .circle {
width: 20px;
height: 20px;
background-color: orange;
margin-left: -10px;
margin-top: -10px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="time">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
<!-- 圆心-->
<div class="circle"></div>
</div>
</div>
<script>
// 1.0 获取指定元素 （时分秒）
var hour = document.getElementById("hour")
var minute = document.getElementById("minute")
var second = document.getElementById("second")
// 2.0 定时器函数
var timer = setInterval(currentTime,1000)
// 3.0 编写处理时间逻辑的函数
function currentTime(){
// 3.0.1 创建当前日期对象的实例
var nowTime = new Date()
// 3.0.2 获取毫秒值
var ms = nowTime.getMilliseconds()
// 3.0.3 获取秒数
var s = nowTime.getSeconds() + ms/1000;
// 3.0.4 获取分钟
var m = nowTime.getMinutes() + s / 60
// 3.0.5 获取小时
var h = nowTime.getHours() + m / 60
// 360 / 12 = 30 时针走的步长
// 30 / 5 = 6 分针和秒针走的步长
// 3.0.6 设置时针的角度
hour.style.transform = "rotate("+(h * 30 )+"deg)"
minute.style.transform = "rotate("+(m * 6 )+"deg)"
second.style.transform = "rotate("+(s * 6 )+"deg)"
}
// 4.0 调用currentTime函数
currentTime();
</script>
</body>
</html>
wxt_
发布了23 篇原创文章 · 获赞 21 · 访问量 2309
私信
关注