JS實現時鐘效果

閒來無事，用JS寫了個時鐘，只要思路理清了，作起來其實還挺簡單的。

先發個效果連接 點擊查看

Demo

代碼實現

HTML

<div id="warp" >
    <div id="clock" >
            <div id="number">
                <div><span>9</span></div>
                <div><span>10</span></div>
                <div><span>11</span></div>
                <div><span>12</span></div>
                <div><span>1</span></div>
                <div><span>2</span></div>
                <div><span>3</span></div>
                <div><span>4</span></div>
                <div><span>5</span></div>
                <div><span>6</span></div>
                <div><span>7</span></div>
                <div><span>8</span></div>
            </div>
            <div id="houre" class="pointer" ></div>
            <div id="minute" class="pointer" ></div>
            <div id="second" class="pointer" ></div>
    </div>
</div>

CSS

*{
    padding：0；
    margin：0；
}
html, body {
    height: 100%;
    background: #9c9;
}
#warp{
    width:230px;
    height:230px;
    margin:50px auto;
}
#clock{
    width:200px;
    height:200px;
    border-radius:115px;
    border:15px solid #f96;
    background:white;
    position:relative;
}
#number div{
    width:190px;
    height:20px;
    position:absolute;
    left:10px;
    top:90px;
}
#number span{
    display:block;
    width:20px;
    height:20px;
}
.pointer{
    position:absolute;
    bottom:90px;
    transform-origin:50% 90%;
    -webkit-transform-origin:50% 90%;
}
#houre{
    width:5px;
    height:60px;
    left:98px;
    background:black;
}
#minute{
    width:3px;
    height:70px;
    left:99px;
    background:gray;
}
#second{
    width:1px;
    height:80px;
    left:100px;
    background:red;
}

這裏要注意的是number裏面div的寬度給夠，要否則後面用JS佈局會出現問題。

JavaScript

var oNumber=document.getElementById("number");
var oDiv=oNumber.getElementsByTagName("div");
var oSpan=oNumber.getElementsByTagName("span");
for(var i=0;i<oDiv.length;i++){
    oDiv[i].style.WebkitTransform="rotate(" + i * 30 + "deg)";
}    
for(var j=0;j<oSpan.length;j++){
    oSpan[j].style.WebkitTransform="rotate("+ j * -30 + "deg)";
}    
function ColorNumber(){
    var oHoure=document.getElementById("houre");
    var oMinute=document.getElementById("minute");
    var oSecond=document.getElementById("second");

    var nowTime=new Date();
    var nowHoure=nowTime.getHours();
    var nowMinute=nowTime.getMinutes();
    var nowSecond=nowTime.getSeconds();
    var houreDeg=(nowMinute/60)*30;
    var minuteDeg=(nowSecond/60)*6;
    oHoure.style.WebkitTransform="rotate("+ (nowHoure * 30+houreDeg) + "deg)";
    oMinute.style.WebkitTransform="rotate("+ (nowMinute * 6+ minuteDeg) + "deg)";
    oSecond.style.WebkitTransform="rotate("+ (nowSecond * 6) + "deg)";
}
ColorNumber();
setInterval(ColorNumber,1000);

這裏主要代碼就兩段，一段是佈局用的，讓數字旋轉到相應的位置並調整方向：

for(var i=0;i<oDiv.length;i++){
    oDiv[i].style.WebkitTransform="rotate(" + i * 30 + "deg)";
}    
for(var j=0;j<oSpan.length;j++){
    oSpan[j].style.WebkitTransform="rotate("+ j * -30 + "deg)";
}

另外一段是計算指針的角度，其中最重要的是在不滿一小時或不滿一分鐘時，時針或分針應該轉多少度：

var houreDeg=(nowMinute/60)*30;
var minuteDeg=(nowSecond/60)*6;

It's done.是否是很簡單......