JS css3圆形摇摆时钟特效代码下载


JS css3圆形摇摆时钟特效代码下载
JS css3圆形摇摆时钟特效代码下载以及圆形摇摆时钟等js/jquery网页特效代码下载。

1. HTML代码

    <div class="clock">
        <div id="dial" class="dial"></div>
        <div id="second" class="second"></div>
        <div id="minute" class="minute"></div>
        <div id="hour" class="hour"></div>
        <div class="swing"></div>
    </div>
    <script>
        var dial = document.getElementById("dial");
        var secondId = document.getElementById("second");
        var minuteId = document.getElementById("minute");
        var hourId = document.getElementById("hour");
        /*获取当前时间
         *
         */
        var date = new Date();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        /*计算页面指针加载时的角度
         */
        hourDeg = 360 * (hour % 12) / 12;
        minuteDeg = 360 * minute / 60;
        secondDeg = 360 * second / 60;
        hourId.style.transform = "rotate(" + hourDeg + "deg)";
        minuteId.style.transform = "rotate(" + minuteDeg + "deg)";
        secondId.style.transform = "rotate(" + secondDeg + "deg)";
        var Deg = 0;
        for (var i = 0; i < 60; i++) {
            var ke = document.createElement("div"); //创建一个div
            var hourNum = i / 5; //当为5时
            if (hourNum == 0) hourNum = 12;
            if (i % 5 == 0) { //大刻度
                ke.className = "five";
                ke.innerHTML = "<i>" + hourNum + "</i>"
            }
            ke.style.transform = "rotate(" + Deg + "deg)";
            dial.appendChild(ke);
            Deg += 6;
        }
        function loopSecond() {
            secondDeg = 360 * second / 60;
            baseMinuteDeg = 360 * minute / 60;
            baseHourDeg = 360 * (hour % 12) / 12;
            minuteDeg = baseMinuteDeg + (6 * second / 60);
            hourDeg = baseHourDeg + (30 * minute / 60);
            hourId.style.transform = "rotate(" + hourDeg + "deg)";
            minuteId.style.transform = "rotate(" + minuteDeg + "deg)";
            secondId.style.transform = "rotate(" + secondDeg + "deg)";
            second += 1;
            if (second > 60) {
                second = 1;
                minute += 1;
            }
            if (minute == 60) {
                minute = 0;
                hour += 1;
            }
            setTimeout(function(){
                loopSecond();
            },1000);
        }
        loopSecond();
    </script>

相关推荐

发表评论

相关文章