Css3+Js 漂亮時鐘

最後更新：2013-12-01 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

Css3+Js 漂亮時鐘
瀏覽器支援 IE9/GoogleChrome/FireFox/Safari

：

HTML代碼

<!DOCTYPE html>
<html>
<head>
<meta >
<title>css3+js打造漂亮時鐘</title>
<style>
body{background: -webkit-radial-gradient(center center,circle,#666,#000); margin: 0;}
div{margin: 0; padding: 0;}
.box{padding-top: 50px; width:410px; margin: 0 auto;}
.clock{position: relative; width:400px; height: 400px; border: 5px solid #fff; border-radius: 200px; background:-webkit-radial-gradient(center center,circle,#fff,#bbb); box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.8); }
.clock .clock-xin{position: absolute; top: 50%; left: 50%; width:30px; height: 30px; border-radius: 15px; background: #eee;margin:-15px 0 0 -15px;}
.clock .clock-xin2{position: absolute; top: 50%; left: 50%; width:12px; height: 12px; border-radius: 6px; background: #f00; z-index: 100; margin:-6px 0 0 -6px;}
.clock .date{position: absolute; z-index: 3; top: 245px; left: 130px; font-size: 20px; color: #000; text-shadow: 1px 1px white; }
.clock .hour{position: absolute; z-index: 3; top: 50%; left: 50%; width:160px; height: 6px; border-radius:5px; background: #000; -webkit-transform-origin: 10px 50%; margin:-3px 0 0 -10px;}
.clock .min{position: absolute; z-index: 4;top: 50%; left: 50%; width:180px; height: 4px; border-radius:5px; background: #333; -webkit-transform-origin: 10px 50%; margin:-2px 0 0 -10px;}
.clock .sec{position: absolute; z-index: 5; top: 50%; left: 50%; width:210px; height: 2px; background: #f00; -webkit-transform-origin: 30px 50%; margin:-1px 0 0 -30px;}
.clock em{display: block; width: 2px; height: 5px; background: #000; position: absolute; top: 0; left: 0; -webkit-transform-origin: 50% 0; margin-left: -1px;}
.clock em.ishour{width: 6px; height: 10px; margin-left: -3px;}
.clock em.ishour i{font-size: 25px; color: #000; position: absolute; top: 12px; left: -7px;text-shadow: 1px 1px white; }
</style>
</head>
<body>
<div style="color:white;">瀏覽器支援：GoogleChrome</div>
<div class="box">
    <div class="clock" id="clock">
        <div class="clock-xin"></div>
        <div class="clock-xin2"></div>
        <div id="date" class="date"></div>
        <div id="hour" class="hour"></div>
        <div id="min" class="min"></div>
        <div id="sec" class="sec"></div>
    </div>
</div>

    var $clock = document.getElementById('clock'),
        $date = document.getElementById('date'),
        $hour = document.getElementById('hour'),
        $min = document.getElementById('min'),
        $sec = document.getElementById('sec'),
        oSecs = document.createElement('em');
    for (var i = 1; i < 61; i++) {
        var tempSecs = oSecs.cloneNode(),
        pos = getSecPos(i);
        if(i%5==0){
            tempSecs.className = 'ishour';
            tempSecs.innerHTML = '<i style="-webkit-transform:rotate('+(-i*6)+'deg);">'+(i/5)+'</i>';
        }
        tempSecs.style.cssText='left:'+pos.x+'px; top:'+pos.y+'px; -webkit-transform:rotate('+i*6+'deg);';
        $clock.appendChild(tempSecs);
    }

    // 圓弧上的座標換算
    function getSecPos(dep) {
        var hudu = (2*Math.PI/360)*6*dep,
        r = 200; //半徑大小
        return {
            x: Math.floor(r + Math.sin(hudu)*r),
            y: Math.floor(r - Math.cos(hudu)*r),
        }
    }

    ;(function() {
        // 目前時間
        var _now = new Date(),
        _h = _now.getHours(),
        _m = _now.getMinutes(),
        _s = _now.getSeconds();

//時針位移距離
_h_dep = Math.floor(_m/12)*6;

            $hour.style.cssText = '-webkit-transform:rotate('+(_h*30-90+_h_dep)+'deg);';
            $min.style.cssText = '-webkit-transform:rotate('+(_m*6-90)+'deg);';
            $sec.style.cssText = '-webkit-transform:rotate('+(_s*6-90)+'deg);';

};

        gotime();
        setInterval(gotime, 1000);
    })();

};

</script>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Css3+Js 漂亮時鐘

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support