简单的时钟效果
先看下效果
代码简单,就不做多于的赘述了,直接上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.bp {
width: 400px;
height: 400px;
border: 1px solid black;
border-radius: 100%;
margin: 100px auto;
position: relative;
background-image: linear-gradient(141deg, #9fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
}
.center {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: honeydew;
position: relative;
left: 188px;
top: 192px;
z-index: 99;
}
.kedu {
width: 1px;
height: 10px;
background: black;
position: absolute;
left: 200px;
top: 0px;
transform-origin: 0px 200px;
}
.shuzi {
position: absolute;
width: 10px;
font-size: 10px;
height: 170px;
transform-origin: bottom;
top: 30px;
left: 190px;
}
.sec {
width: 1px;
height: 150px;
position: absolute;
left: 200px;
top: 60px;
transform-origin: bottom;
background: red;
}
.min {
width: 2px;
height: 120px;
position: absolute;
left: 198px;
top: 80px;
transform-origin: bottom;
background: black;
}
.hour {
width: 3px;
height: 90px;
position: absolute;
left: 197px;
top: 110px;
transform-origin: bottom;
background: black;
}
</style>
</head>
<body>
<div class="bp">
<div class="center"></div>
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
</div>
</body>
<script type="text/javascript">
var bigBox = document.querySelector(".bp");
var hour = document.querySelector(".hour");
var minute = document.querySelector(".min");
var second = document.querySelector(".sec");
var date = new Date();
var hours = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var hk = hours * 30 + min * 0.5;
hour.style.transform = "rotateZ(" + hk + "deg)";
minute.style.transform = "rotateZ(" + min * 6 + "deg)";
second.style.transform = "rotateZ(" + sec * 6 + "deg)";
for (var i = 0; i < 60; i++) {
var kedu = document.createElement("div");
kedu.className = "kedu";
bigBox.appendChild(kedu);
}
for (var i = 0; i < 12; i++) {
var shuzi = document.createElement("div");
shuzi.className = "shuzi"
shuzi.style.transform = "rotateZ(" + (i + 1) * 30 + "deg)";
var num = document.createElement("div");
num.innerHTML = i + 1;
num.style.textAlign = "center";
num.style.transform = "rotateZ(" + (i + 1) * -30 + "deg)";
shuzi.appendChild(num)
bigBox.appendChild(shuzi)
}
function keduchi() {
var kds = document.querySelectorAll(".kedu");
for (var i = 0; i < kds.length; i++) {
kds[i].style.transform = 'rotateZ(' + 6 * i + 'deg)';
if (i % 5 == 0) {
kds[i].style.height = 15 + "px"
}
}
}
keduchi()
var md = 0;
setInterval(function () {
var date2 = new Date();
var ss = date2.getSeconds();
if (ss % 60 == 0) {
md++;
var mds = min * 6 + 6 * md;
minute.style.transform = "rotateZ(" + mds + "deg)";
var hds = hk + 0.5 * md;
hour.style.transform = "rotateZ(" + hds + "deg)";
}
second.style.transform = "rotateZ(" + ss * 6 + "deg)";
}, 1000)
</script>
</html>
tips:
如果本文对您有帮助,欢迎评论告知。