DOM時鐘

時間 2019-12-07

標籤 dom 時鐘欄目 HTML 简体版

原文原文鏈接

使用JS使時鐘運動javascript

DOM運動，主要操做css3中transform：rotate（）；css

計時器setInterval（），setTimeout()，如何防止時鐘偷停;html

時鐘的時針、分針、秒針的運動的度數之比；java

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="decription" content="css3 transform rotate() 旋轉，製造時鐘運動效果">
<title>Clock</title>
<style>
#clock
{
width:500px;
height:500px;
border:30px solid black;
border-radius: 50px;
position: relative;
}
#clock div
{
position: absolute;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;jquery

}
#hour-hand
{
width:8%;
height:24%;
background-color: red;
left:50%;
margin-left: -4%;
top:50%;
margin-top: -5.5%;
box-shadow: 10px 10px #ccc;
}
#minute-hand
{
width:10%;
height:34%;
background-color: green;
left:50%;
margin-left: -5%;
top:50%;
margin-top: -5.5%;
}
#clock #second-hand
{
width:5%;
height:50%;
background-color: blue;
background-size: contain;
left:50%;
margin-left:-2.5%;
top:35%;
box-shadow: 5px 5px #ccc;
-webkit-transform-origin: 50% 45px;
-moz-transform-origin: 50% 45px;
transform-origin: 50% 45px;
}
</style>
<script src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oClock = document.getElementById("clock");
var oHourHand = document.getElementById("hour-hand");
var oMinuteHand =document.getElementById("minute-hand");
var oSecendHand = document.getElementById("second-hand");css3

var oDate = new Date(); //初始化時鐘，獲取系統時間，賦值給時、分、秒針
var nowHours = oDate.getHours();
var nowMinutes = oDate.getMinutes();
var nowSecond = oDate.getSeconds();
nowHours %=12;
var hoursDeg = 30*nowHours+nowMinutes/2+nowSecond/120+180;
var minutesDeg = 6*nowMinutes+nowSecond/10+180;
var secondsDeg = 6*nowSecond+180;
oSecendHand.style.webkitTransform="rotate("+secondsDeg+"deg)";
oMinuteHand.style.webkitTransform="rotate("+minutesDeg+"deg)";　　　　//此處用到weikitTransform,請使用webkit內核瀏覽器進行查看web

oHourHand.style.webkitTransform = "rotate("+hoursDeg+"deg)";　　　　　　//可以使用jQuery替代，用法自行查閱。瀏覽器

var startTime = oDate.getTime();
var count=0;
function fixed()　　　　　　　　 //防止該事件被阻塞，時鐘不許
{
count ++;
var offset = new Date().getTime()- (startTime + count*1000);
var nextTime = 1000 - offset;
if (nextTime<0) {nextTime = 0;};
setTimeout(fixed,nextTime);
secondsDeg +=6;　　　　　　　　　　　　　　//每秒時分秒針所走的距離
if (secondsDeg%360==0) {
secondsDeg=0;
};orm

minutesDeg +=1/10;
if (minutesDeg>=360) {
minutesDeg%=360;
};htm

hoursDeg +=1/120;
if (hoursDeg>=360) {
hoursDeg%=360;
};

oSecendHand.style.webkitTransform="rotate("+secondsDeg+"deg)";
oMinuteHand.style.webkitTransform="rotate("+minutesDeg+"deg)";
oHourHand.style.webkitTransform = "rotate("+hoursDeg+"deg)";
console.log(new Date().getTime() - (startTime + count * 1000));
}
setTimeout(fixed,1000)

} </script></head><body> <div id="clock"> <div id="hour-hand"> </div> <div id="minute-hand"> </div> <div id="second-hand"> </div> </div></body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。