溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關使用JavaScript怎么實現一個刻度時鐘，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
布局代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css" id="sty">
*{
margin: 0;
padding: 0;
list-style: none;
}
#wrap{
width: 200px;
height: 200px;
border: 1px solid #000;
border-radius: 50%;
margin: 20px auto;
position: relative;
}
#wrap ul{
position: relative;
}
#wrap ul li{
width: 2px;
height: 6px;
background: #000;
position: absolute;
left: 99px;
top: 0;
-moz-transform-origin: center 100px;
}
#wrap ul li:nth-child(5n){
height: 10px;
}
#con{
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
position: absolute;
left: 95px;
top: 95px;
}
#hour{
width: 5px;
height: 70px;
background: red;
border-radius: 50%;
position: absolute;
left: 98px;
top: 35px;
-moz-transform-origin: center 65px;
}
#min{
width: 3px;
height: 85px;
background: #000;
border-radius: 50%;
position: absolute;
left: 98.5px;
top: 20px;
-moz-transform-origin: center 80px;
}
#sec{
width: 2px;
height: 100px;
background: gray;
border-radius: 50%;
position: absolute;
left: 98.5px;
top: 20px;
-moz-transform-origin: center 80px;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="list">
</ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div id="con"></div>
</div>
</body>
</html>布局代碼里需要注意的是：每隔四個刻度就有一個刻度比較長，所以我們在設置樣式的時候要特別注意加上：#wrap ul li:nth-child(5n){height: 10px;}。第5n個的長度變長。
JS代碼中主要搞清楚三針之間的度數關系就好做了，代碼如下：
<script type="text/javascript">
window.onload=function(){
var oWrap=document.getElementById('wrap');
var oList=document.getElementById('list');
var oSty=document.getElementById('sty');
var tump='';
for(var i=0;i<60;i++){
var aLi=document.createElement('li');
oList.appendChild(aLi);
tump+='#wrap ul li:nth-child('+(i+1)+'){transform: rotate('+(i+1)*6+'deg);}';
oSty.innerHTML+=tump;
}
var oSec=document.getElementById('sec');
var oMin=document.getElementById('min');
var oHour=document.getElementById('hour');
function time(){
var date=new Date();
var s=date.getSeconds();
var m=date.getMinutes()+(s/60);
var h=date.getHours()+(m/60);
oSec.style.transform='rotate('+s*6+'deg)';
oMin.style.transform='rotate('+m*6+'deg)';
oHour.style.transform='rotate('+h*30+'deg)';
}
time();
setInterval(time,1000);
}
</script>上述就是小編為大家分享的使用JavaScript怎么實現一個刻度時鐘了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
