时钟"/>
纯js+css制作的时钟
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>时钟完整版</title><style>*{margin: 0;padding: 0}#box{width: 400px;height: 400px;background: #d4d1d1;border-radius: 50%;border: 1px solid #7c7a7a;position: relative;margin:50px auto;}#box>li{list-style: none;transform-origin:center top;width: 3px;background : #7c7a7a;position :absolute; }#box .hourHand{width: 4px;height: 40px;background: green;position: absolute;left: 50%;bottom: 50%;transform-origin:center bottom;}#box .minuteHand{width: 4px;height: 75px;background: black;position: absolute;left: 50%;bottom: 50%;transform-origin:center bottom; }#box .secondHand{width: 4px;height: 95px;background: red;position: absolute;left: 50%;bottom: 50%;transform-origin:center bottom; }#box .circle{width: 10px;height: 10px;background: black;border-radius: 5px;position: absolute;left: 49%;top: 49%; }#box .b1{position: absolute;left: 41%;bottom:20%; }</style>
</head>
<body><div id="box"><div class="hourHand"></div><div class="minuteHand"></div><div class="secondHand"></div><div class="circle"></div><b class="b1"></b></div>
</body>
<script>var oBox = document.getElementById("box");
var oHourHand = document.getElementsByClassName("hourHand");
var oMinuteHand = document.getElementsByClassName("minuteHand");
var oSecondHand = document.getElementsByClassName("secondHand");
var oB = document.getElementsByClassName("b1");//degL表示时钟的长格旋转度数
var degL = 0;
//degS表示时钟的短格旋转度数
var degS = 0;
//时钟的半径
var r = 200;
//记录时钟的圆心位置
var X = 200;
var Y = 200;//创建时钟上的刻度
for(var i = 0;i < 12;i++){var oLi = document.createElement("li");var oSpan = document.createElement("span");var rotate = degL * (Math.PI / 180);var X1 = Math.sin(rotate) * r;var Y1 = Math.cos(rotate) * r;oLi.style.height = "15px";oLi.style.left = X + X1 + "px";oLi.style.top = Y - Y1 + "px";if (i == 0) {oSpan.innerHTML = 12;}else{oSpan.innerHTML = i;}oSpan.style.position = "absolute";oSpan.style.left = "-3px";oSpan.style.top = "17px";oSpan.style.transform = `rotate(${-degL}deg)`;oLi.style.transform = `rotate(${degL}deg)`;oBox.appendChild(oLi);oLi.appendChild(oSpan);for(var k = 0;k < 4;k++){if (degS != degL) {var oLi = document.createElement("li");var rotate = degS * (Math.PI / 180);var X2 = Math.sin(rotate) * r;var Y2 = Math.cos(rotate) * r;oLi.style.height = "10px";oLi.style.left = X + X2 + "px";oLi.style.top = Y - Y2 + "px";oLi.style.transform = `rotate(${degS}deg)`;oBox.appendChild(oLi); }else{--k; }degS+=6;}degL+=30;
}//获取当前时间的年,月,日,时,分,秒
function getTime(){var d = new Date();var year = d.getFullYear();var month = d.getMonth();var day = d.getDate();var hour = d.getHours();var week = d.getDay();var minute = d.getMinutes(); var second = d.getSeconds();oSecondHand[0].style.transform = `rotate(${second*6}deg)`;oMinuteHand[0].style.transform = `rotate(${minute*6}deg)`;oHourHand[0].style.transform = `rotate(${hour*30 + minute / 2}deg)`;oB[0].innerHTML = year+"-"+(month+1)+"-"+day;
}setInterval(function(){getTime();},1000)
</script>
</html>更多推荐
纯js+css制作的时钟
发布评论