史上最簡單的js+css3實現時鍾效果

今天我看到百度搜索的時間那個效果不錯，於是就產生了模仿一下的效果，不過為了節省時間，就隨便布了下局，廢話不多說，先看看效果吧，順便把百度的效果也拿過來。

對比樣子差了好多啊，但是基本功能都是實現了的，只要修改樣式就好了，我的美感特別差，所以就……

我用的是css3和js實現的這個效果，漸變是由css3的linear-gradient實現，當然js也有實現的辦法，不過js實現到底不如css3實現簡單，所以就不贅述了。有興趣的可以下來自己看看。

時鍾的旋轉是由css的transform:rotate實現，js進行控制。

廢話不多說，直接來代碼。首先就是html標簽

<div id="tab">
    <div id="Tradion">
        <div id="hours" class="tran"></div>
        <div id="minutes" class="tran"></div>
        <div id="seconds" class="tran"></div>
        <div id="dian"></div>
        
    </div>
    <h1 id="aTime"></h1>
    <h3 id="aDate"></h3>
    <h2 id="week"></h2>
</div>

這個代碼沒什么，css布局代碼如下：

<style type="text/css">
        #tab{
            width: 500px;
            height: 200px;
            /*background:-webkit-gradient(linear,center top,center bottom,from(blue), to(white));*/
            background: -webkit-linear-gradient(top,#007fff,#84bff9);/*css3設置漸變*/
            margin-bottom: 100px;
        }
        #aTime{
            color: #fff;
            /*text-align: center;*/
            /*line-height: 200px;*/
            float: left;
        }
        #Tradion{
            width: 100px;
            height: 100px;
            border: 2px solid #fff;
            border-radius: 100px;
            float: left;
            margin: 50px 50px;
        }
        #hours{
            width: 30px;
            height: 2px;
            margin:50px 50px;
            background: #fff;
            transform-origin: left bottom;
        }
        #minutes{
            width: 38px;
            height: 2px;
            background: #fff;
            margin:-50px 50px;
            transform-origin: left bottom;
            transform:rotate(0deg);
        }
        #seconds{
            width: 45px;
            height: 1px;
            background: #fff;
            margin:50px 50px;
            transform-origin: left bottom;
            transform:rotate(0deg);

        }
        .tran{
            transform: rotate(-90deg);/*這里測試了一下旋轉角*/
        }
        #dian{
            width:6px;
            height: 6px;
            border-radius: 6px;
            background: #fff;
            margin:-55px 46px;
        }
        #aDate,#week{
            color: #fff;
            padding-top: 50px;
        }
    </style>

實現了css之后的效果是這樣的

只有一個時鍾的樣子，接下來就是js進行控制了

首先來時間顯示和鍾表轉動的代碼

<script type="text/javascript">
        window.onload=function(){
            function addzero(num){
                if(num>=10)
                {
                    return ""+num;
                }
                else
                {
                    return "0"+num;
                }
            }
            
            function times(){
                var date=new Date();
                var aTime=document.getElementById('aTime');
                var str= addzero(date.getHours())+":"+ addzero(date.getMinutes())+":"+ addzero(date.getSeconds());
                aTime.innerHTML=str;
            }
            setInterval(times,1000);
            times();
            function Ttranform(){
                var date=new Date();
                var hours=document.getElementById('hours');
                var minutes=document.getElementById('minutes');
                var seconds=document.getElementById('seconds');
                var num=date.getHours();
                var num2=date.getMinutes();
                var num3=date.getSeconds();
                hours.style.transform="rotate("+(num*30-90)+"deg)";
                minutes.style.transform="rotate("+(num2*6-90)+"deg)";
                seconds.style.transform="rotate("+(num3*6-90)+"deg)";

            }
            setInterval(Ttranform,1000);
            Ttranform();
        }
    </script>

還差一個日期的顯示代碼，這個就簡單了，完全跟時間顯示的一樣啊，

<script type="text/javascript">
        function Adate(){
                var date=new Date();
                var aDate=document.getElementById("aDate");
                var week=document.getElementById('week');
                var weekList=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
                var str= date.getFullYear()+"-"+(date.getMonth()+1)+"-"+ date.getDate();
                aDate.innerHTML=str;
                var westr=weekList[date.getDay()];
                week.innerHTML=westr;
            }
            Adate();
    </script>

先說一下啊，時間顯示 getMonth()他認為這個月是從0開始的

getDate（日）
getDay(星期 0 1 2 3 4 5 6 )

這兩個函數也不要弄混了哦。

 hours.style.transform="rotate("+(num*30-90)+"deg)";
 minutes.style.transform="rotate("+(num2*6-90)+"deg)";
 seconds.style.transform="rotate("+(num3*6-90)+"deg)";
角度計算為什么要減90deg是因為我的初始角度是90度，大家如果要是從0度開始就不能減了。
上面就是我所實現的簡單的時鍾效果，是不是特別簡單啊。大家自己可以試着改進，我這個實現還是太low，希望你們能夠做出更好的效果。