最終效果圖:
JS實時毫秒時鐘
核心原理:
##### 利用系統時間實時計算時分秒針角度，實現模擬時鐘效果。
第一步:創建表盤和表針:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*
{
margin:0;
padding:0;
list-style:none;
}
#box
{
width:300px;
height:300px;
border:1px solid #000;
border-radius:50%;
position:absolute;
left:300px;
top:100px;
background:#fff;
box-shadow:1px 1px 5px #000;
}
/*設置旋轉中心*/
#box div
{
transform-origin:center bottom;
}
#box .cap
{
width:20px;
border-radius:50%;
height:20px;
background:#999;
position:absolute;
left:50%;
top:50%;
margin:-10px 0 0 -10px;
}
#box .hour
{
width:14px;
height:80px;
background:#000;
position:absolute;
left:50%;
margin-left:-7px;
top:50%;
margin-top:-80px;
border-radius:50% 50% 0 0;
}
#box .min
{
width:10px;
height:100px;
background:#282828;
position:absolute;
left:50%;
top:50%;
margin-left:-5px;
margin-top:-100px;
border-radius:50% 50% 0 0;
}
#box .sec
{
width:4px;
height:120px;
background:#f00;
position:absolute;
left:50%;
margin-left:-2px;
top:50%;
margin-top:-120px;
}
</style>
</head>
<body>
<div id="box">
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
<div class="cap"></div>
</div>
</body>
</html>
第一步效果如下圖所示:
第一步創建表盤和指針
第二步:生成表盤刻度（創建刻度元素并添加樣式）:
添加Sript部分:
<script>
window.onload=function(){
//獲取元素
var oBox=document.getElementById('box');
var oH=document.querySelector('.hour');
var oM=document.querySelector('.min');
var oS=document.querySelector('.sec');
//生成刻度(這里我自定義了1刻度=2分鐘，總共是60刻度)
var N=60;
//創建元素
for(var i=0; i<N; i++){
var oSpan=document.createElement('span');
//將小時刻度與分鐘刻度區分開并添加class
if(i%5==0){ //整點刻度
oSpan.className='bs';
var num=i/5==0?12:i/5;
oSpan.innerHTML='<em>'+num+'<\/em>'; //添加小時數
oSpan.children[0].style.transform='rotate('+-i*6+'deg)'; //調整角度與鐘框垂直
}else{ //分鐘刻度
oSpan.className='scale';
}
oBox.appendChild(oSpan);
oSpan.style.transform='rotate('+6*i+'deg)';
}
};
</script>
添加CSS部分:
/*整點刻度樣式*/
.bs
{
width:6px;
height:18px;
background:#000;
position:absolute;
left:50%;
margin-left:-3px;
transform-origin:center 150px;
}
/*分鐘刻度樣式*/
#box span em
{
margin-top:20px;
width:100px;
position:absolute;
left:50%;
margin-left:-50px;
text-align:center;
font-style:normal;
}
第二步效果如下圖所示:
第二步創建表盤刻度效果
第三步：實時走動（獲取系統時間、計算角度、添加定時器）
添加JS部分:
function clock(){
var oDate=new Date();
var h=oDate.getHours();
var m=oDate.getMinutes();
var s=oDate.getSeconds();
var ms=oDate.getMilliseconds();
//1h=60min;1h=30°;
oH.style.transform='rotate('+(h*30+m/60*30)+'deg)';
//1min=60s;1min=6°;
oM.style.transform='rotate('+(m*6+s/60*6)+'deg)';
//1s=1000ms;1s=6°;
oS.style.transform='rotate('+(s*6+ms/1000*6)+'deg)';
}
//防止打開卡頓一下
clock();
//設置定時器
setInterval(clock,30);
第四步:拖拽（獲取舊位置設置新位置）
添加JS部分:
function drag(oDiv){
oDiv.onmousedown=function(ev){
var oEvent=ev || event;
//獲取舊位置
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
var oEvent=ev || event;
//設置新位置
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
//釋放捕獲
oDiv.releaseCapture && oDiv.releaseCapture();
};
//設置捕獲
oDiv.setCapture && oDiv.setCapture();
return false;
};
};
完整代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*
{
margin:0;
padding:0;
list-style:none;
}
#box
{
width:300px;
height:300px;
border:1px solid #000;
border-radius:50%;
position:absolute;
left:300px;
top:100px;
background:#fff;
box-shadow:1px 1px 5px #000;
}
#box .cap
{
width:20px;
border-radius:50%;
height:20px;
background:#999;
position:absolute;
left:50%;
top:50%;
margin:-10px 0 0 -10px;
}
#box div
{
transform-origin:center bottom;
}
#box .hour
{
width:14px;
height:80px;
background:#000;
position:absolute;
left:50%;
margin-left:-7px;
top:50%;
margin-top:-80px;
border-radius:50% 50% 0 0;
}
#box .min
{
width:10px;
height:100px;
background:#282828;
position:absolute;
left:50%;
margin-left:-5px;
top:50%;
margin-top:-100px;
border-radius:50% 50% 0 0;
}
#box .sec
{
width:4px;
height:120px;
background:#f00;
position:absolute;
left:50%;
margin-left:-2px;
top:50%;
margin-top:-120px;
}
.scale
{
width:4px;
height:10px;
background:#000;
position:absolute;
left:50%;
margin-left:-2px;
transform-origin:center 150px;
}
.bs
{
width:6px;
height:18px;
background:#000;
position:absolute;
left:50%;
margin-left:-3px;
transform-origin:center 150px;
}
#box span em
{
margin-top:20px;
width:100px;
position:absolute;
left:50%;
margin-left:-50px;
text-align:center;
font-style:normal;
}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var oH=document.querySelector('.hour');
var oM=document.querySelector('.min');
var oS=document.querySelector('.sec');
//生成刻度
var N=60;
for(var i=0; i<N; i++){
var oSpan=document.createElement('span');
if(i%5==0){
oSpan.className='bs';
var num=i/5==0?12:i/5;
oSpan.innerHTML='<em>'+num+'<\/em>';
oSpan.children[0].style.transform='rotate('+-i*6+'deg)';
}else{
oSpan.className='scale';
}
oBox.appendChild(oSpan);
oSpan.style.transform='rotate('+6*i+'deg)';
}
function clock(){
var oDate=new Date();
var h=oDate.getHours();
var m=oDate.getMinutes();
var s=oDate.getSeconds();
var ms=oDate.getMilliseconds();
oH.style.transform='rotate('+(h*30+m/60*30)+'deg)';
oM.style.transform='rotate('+(m*6+s/60*6)+'deg)';
oS.style.transform='rotate('+(s*6+ms/1000*6)+'deg)';
}
clock();
setInterval(clock,30);
drag(oBox);
//拖拽
function drag(oDiv){
oDiv.onmousedown=function(ev){
var oEvent=ev || event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
var oEvent=ev || event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
oDiv.releaseCapture && oDiv.releaseCapture();
};
oDiv.setCapture && oDiv.setCapture();
return false;
};
};
};
</script>
</head>
<body>
<div id="box">
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
<div class="cap"></div>
</div>
</body>
</html>
最后一個可以拖拽的毫秒時鐘就做好了?_?！
（轉載請注明出處: http://www.lxweimin.com/p/70e6ff8171e5）
