用JavaScript实现一个时钟

html+css+js实现一个时钟

变懒了好多呢...只贴个代码就完事了...

html分块

<div id="warp">
        <!-- 先把时钟的结构写出来 -->
        <div id="border">
            <div id="number">
                <!-- 因为是默认是显示成一行的数字，故从9先开始 -->
                <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="hour" 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%;

}
#h1{
    width:340px;
    height:100px;
    margin:50px auto;

}
#warp{
    width:230px;
    height:230px;
    margin:160px auto;

}
#border{
    width:200px;
    height:200px;
    border-radius:115px;
    border:0px solid black;
    background:#9c9;
    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%;
}
#hour{
    height:50px;
    left:98px;
    outline-style: dotted;
    outline-color: black;
}
#minute{
    height:65px;
    left:99px;
    outline-style: dotted;
    outline-color: blue;
}
#second{
    height:80px;
    left:100px;
    outline-style: dotted;
    outline-color: red;
}

JavaScript分块

var Num = document.getElementById(“number”);
var Div = Num.getElementsByTagName(“div”);
var Span = Num.getElementsByTagName(“span”);

//这是用来将div旋转的
for(var i=0;i<Div.length;i++){
    Div[i].style.WebkitTransform="rotate(" + i * 30 + "deg)";
}    

//这是将div中的span，也就是数字旋转到端正的位置
for(var j=0;j<Span.length;j++){
    Span[j].style.WebkitTransform="rotate("+ j * -30 + "deg)";
}

function PointerRotate(){
    var Hour = document.getElementById("hour");
    var Minute = document.getElementById("minute");
    var Second = document.getElementById("second");

    var nowTime = new Date();
    var nowHour = nowTime.getHours();
    var nowMinute = nowTime.getMinutes();
    var nowSecond = nowTime.getSeconds();

    var restHourDeg = (nowMinute/60)*30;
    var restMinuteDeg = (nowSecond/60)*6;

    Hour.style.WebkitTransform = "rotate(" + (nowHour * 30 + restHourDeg) + "deg)";
    Minute.style.WebkitTransform = "rotate(" + (nowMinute * 6 + restMinuteDeg) + "deg)";
    Second.style.WebkitTransform = "rotate(" + (nowSecond * 6 ) + "deg)";
}
PointerRotate();
setInterval(PointerRotate,1000);    

//setInterval(alert("一分钟过去了~"),60000);
</script>
<script>
function numClock(){
    var today = new Date();
    var ji = today.getHours();
    var fun = today.getMinutes();
    var kan = today.getSeconds();
    fun = checkClock(fun);
    kan = checkClock(kan);
    document.getElementById("numclock").innerHTML = ji + ":" + fun + ":" + kan;

}
function checkClock(i){
    if(i<10){
        i = "0" + i;
    }
    return i;
}
setInterval(numClock,1000);