用HTML语言编写一个钟表类的时钟
<!DOCTYPE html>
<html>
<head>
<title>钟表时钟</title>
<meta charset="UTF-8">
<style>
.clock {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 50%;
position: relative;
margin: 50px auto;
background-color: white;
box-shadow: 0px 0px 10px #333;
}
.hour, .minute, .second {
width: 0;
height: 0;
border-style: solid;
position: absolute;
left: 50%;
transform-origin: bottom center;
border-width: 0 3px;
border-radius: 10px;
box-shadow: 0px 0px 10px #333;
}
.hour {
height: 50px;
border-width: 0 6px;
margin-top: -50px;
transform: rotateZ(30deg);
}
.minute {
height: 80px;
border-width: 0 4px;
margin-top: -80px;
transform: rotateZ(45deg);
}
.second {
height: 90px;
border-width: 0 2px;
margin-top: -90px;
transform: rotateZ(60deg);
background-color: red;
border-color: red;
z-index: 2;
}
.hour:before, .minute:before {
content: "";
display: block;
width: 10px;
height: 10px;
background-color: black;
position: absolute;
border-radius: 50%;
top: -5px;
left: -5px;
box-shadow: 0px 0px 10px #333;
}
</style>
</head>
<body>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
<script>
function clock(){
var hour = document.querySelector(".hour");
var minute = document.querySelector(".minute");
var second = document.querySelector(".second");
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var hDeg = h * 30 + m * 0.5 - 90;
var mDeg = m * 6 + s * 0.1 - 90;
var sDeg = s * 6 - 90;
hour.style.transform = "rotateZ(" + hDeg + "deg)";
minute.style.transform = "rotateZ(" + mDeg + "deg)";
second.style.transform = "rotateZ(" + sDeg + "deg)";
setTimeout(clock, 1000);
}
clock();
</script>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/clrq 著作权归作者所有。请勿转载和采集!