JS实现钟表效果

2017 三月

18

原

JS实现钟表效果

（21） （0） 举报 收藏

JS实现钟表效果

通过new Date();获取实时时间然后通过css3的定位和旋转实现钟表效果

css代码:

[css] view plain copy

print ?

1. <style>  
2.     .clock {  
3.         position: relative;  
4.         width: 400px;  
5.         height: 400px;  
6.         margin: 20px auto;  
7.         border-radius: 50%;  
8.         background: url(images/clock.png);  
9.     }  
10.     .clock div:nth-child(1), .clock div:nth-child(2), .clock div:nth-child(3), .clock div:nth-child(4) {  
11.         position: absolute;  
12.         -webkit-transform-origin: bottom;  
13.     }  
14.     .clock div:nth-child(1) {  
15.         top: 45px;  
16.         left: 197px;  
17.         width: 4px;  
18.         height: 160px;  
19.         border-top-right-radius: 50px;  
20.         background: #343339;  
21.     }  
22.     .clock div:nth-child(2) {  
23.         top: 80px;  
24.         left: 195px;  
25.         width: 6px;  
26.         height: 120px;  
27.         border-top-right-radius: 10px;  
28.         border-bottom-right-radius: 10px;  
29.         background: #343332;  
30.     }  
31.     .clock div:nth-child(3) {  
32.         top: 100px;  
33.         left: 195px;  
34.         width: 8px;  
35.         height: 100px;  
36.         border-top-right-radius: 10px;  
37.         border-bottom-right-radius: 10px;  
38.         background: #010001;  
39.     }  
40.     .clock div:nth-child(4) {  
41.         top: 189px;  
42.         left: 188px;  
43.         width: 20px;  
44.         height: 20px;  
45.         border: 1px solid #fff;  
46.         border-radius: 50%;  
47.         background: rgba(237, 200, 45, 1);  
48.     }  
49.    </style>  

    <style>
        .clock {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 20px auto;
            border-radius: 50%;
            background: url(images/clock.png);
        }
        .clock div:nth-child(1), .clock div:nth-child(2), .clock div:nth-child(3), .clock div:nth-child(4) {
            position: absolute;
            -webkit-transform-origin: bottom;
        }
        .clock div:nth-child(1) {
            top: 45px;
            left: 197px;
            width: 4px;
            height: 160px;
            border-top-right-radius: 50px;
            background: #343339;
        }
        .clock div:nth-child(2) {
            top: 80px;
            left: 195px;
            width: 6px;
            height: 120px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            background: #343332;
        }
        .clock div:nth-child(3) {
            top: 100px;
            left: 195px;
            width: 8px;
            height: 100px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            background: #010001;
        }
        .clock div:nth-child(4) {
            top: 189px;
            left: 188px;
            width: 20px;
            height: 20px;
            border: 1px solid #fff;
            border-radius: 50%;
            background: rgba(237, 200, 45, 1);
        }
    </style>

html代码:

[html] view plain copy

print ?

1. <div class=“clock”>  
2.         <div id=“sec”></div>  
3.         <div id=“min”></div>  
4.         <div id=“hour”></div>  
5.         <div></div>  
6.     </div>  

<div class="clock">
        <div id="sec"></div>
        <div id="min"></div>
        <div id="hour"></div>
        <div></div>
    </div>

js代码:

[javascript] view plain copy

print ?

1. <script>  
2.     var hour = document.getElementById(‘hour’);  
3.     var min = document.getElementById(‘min’);  
4.     var sec = document.getElementById(‘sec’);  
5.     var timer = null;  
6.     function sport (){  
7.         var time = new Date();  
8.         sec.style.webkitTransform = ’rotate(‘ + time.getSeconds() * 6 + ‘deg)’;  
9.         min.style.webkitTransform = ’rotate(‘ + (time.getMinutes() + time.getSeconds() / 60) * 6 + ‘deg)’;  
10.         hour.style.WebkitTransform = ’rotate(‘ + (time.getHours() % 12 + time.getMinutes() / 60 + time.getSeconds() / 3600) * 30 + ‘deg)’;  
11.         console.log(sec.style.WebkitTransform);  
12.     }sport ();  
13.     setInterval(sport, 1000);  
14. </script>  

  <script>
        var hour = document.getElementById('hour');
        var min = document.getElementById('min');
        var sec = document.getElementById('sec');
        var timer = null;
        function sport (){
            var time = new Date();
            sec.style.webkitTransform = 'rotate(' + time.getSeconds() * 6 + 'deg)';
            min.style.webkitTransform = 'rotate(' + (time.getMinutes() + time.getSeconds() / 60) * 6 + 'deg)';
            hour.style.WebkitTransform = 'rotate(' + (time.getHours() % 12 + time.getMinutes() / 60 + time.getSeconds() / 3600) * 30 + 'deg)';
            console.log(sec.style.WebkitTransform);
        }sport ();
        setInterval(sport, 1000);
    </script>

文章列表

            </div>
            <div class="rssFix">
                <a href="http://blog.csdn.net/qq_35515563/rss/list" class="column" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_RSS'])"><i class="fa fa-rss"></i></a>
            </div>        

            <div id="goTopBtn" class="skin_backTop"><i class="fa fa-chevron-up"></i></div>
    </div>