1.秒针：一圈360度，360/60：每隔一秒6度；分针：一圈一小时60分钟，一分钟走6度；时针：一圈12小时，360/12，每个小时走30度。
复习css的相关内容，我又忘记了！觉得尽力就可以了！！其他的也无所谓了！！
2.效果如图：

2.DOM元素

<div id="box">
    <div id="hour"></div>
    <div id="min"></div>
    <div id="second"></div>
</div>

4.样式

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 609px;
        height: 505px;
        background: url("images/watch.jpg") no-repeat;
        margin: 20px auto;

        position: relative;
    }

    #hour, #min, #second {
        position: absolute;
        left: 50%;
        top: 0;
        width: 20px;
        height: 145px;
        margin-top: 110px;
        margin-left: 13px;
        transform-origin: 50% 100%;
    }

    #hour {
        background: url("images/watch01.jpg") no-repeat center center;
        border-radius: 40%;
    }

    #min {
        background: url("images/watch02.jpg") no-repeat center center;
        border-radius: 40%;
    }

    #second {
        background: url("images/watch03.jpg") no-repeat center center;
        border-radius: 40%;
    }
</style>

函数

<script>
    window.onload = function (ev) {
        /*获取标签*/
        var hour = document.getElementById('hour');
        var min = document.getElementById('min');
        var second = document.getElementById('second');
        /*开启定时器*/
        setInterval(function () {
        //获取当前时间
            var date = new Date();
        //转换时分秒
            var mills = date.getMilliseconds();  //获取毫秒数
            var s = date.getSeconds() + mills/1000; //秒加上毫秒数
            var m = date.getMinutes() + s/60; //分钟加上秒数
            var h = date.getHours() +m/60; //小时加上分钟数
        //旋转
            hour.style.transform = 'rotate(' + h*30 + 'deg)';
            min.style.transform = 'rotate(' + m*6 + 'deg)';
            second.style.transform = 'rotate(' + s*6 + 'deg)';
        },1000);
    }
</script>