利用JS和CSS3製做的時鐘效果

時間 2019-11-10
原文原文鏈接
看了網上牛人利用 JS和CSS3製做的時鐘效果，很喜歡，現分享在這： javascript
先上圖： css
源碼以下（直接copy便可看到效果）： html
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=uft-8">
<title>利用JS和CSS3製做的時鐘效果</title>
<style type="text/css">
#clock{width:300px;height:300px;border:15px solid #333;position:relative;
        border-radius:300px;
        -moz-border-radius:300px;
        -webkit-border-radius:300px;
        -o-border-radius:300px;
        -ms-border-radius:300px;
        background:#ddd;
        background:radial-gradient(#fff,#ddd);
        background:-moz-radial-gradient(#fff,#ddd);
        background:-webkit-radial-gradient(#fff,#ddd);
        background:-o-radial-gradient(#fff,#ddd);
        background:-ms-radial-gradient(#fff,#ddd);
        box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;
        -moz-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;
        -webkit-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;
        -o-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;
        -ms-box-shadow:0 0 0 12px #fff inset,0 0 0 16px #000 inset;
}
.clock-core{width:16px;height:16px;background:#f00;position:absolute;left:50%;top:50%;margin:-8px 0 0 -8px;z-index:30;
        border-radius:16px;
        -moz-border-radius:16px;
        -webkit-border-radius:16px;
        -o-border-radius:16px;
        -ms-border-radius:16px;
}
#clock-h,#clock-m,#clock-s{width:6px;height:70px;background:#333;position:absolute;left:50%;top:50%;margin:-70px 0 0 -3px;z-index:10;
        transform-origin:50% 100%;
        -moz-transform-origin:50% 100%;
        -webkit-transform-origin:50% 100%;
        -o-transform-origin:50% 100%;
        -ms-transform-origin:50% 100%;
}
#clock-m{height:100px;margin-top:-100px}
#clock-s{width:2px;height:155px;margin:-135px 0 0 -1px;background:#f00;
        transform-origin:50% 87.097%;
        -moz-transform-origin:50% 87.097%;
        -webkit-transform-origin:50% 87.097%;
        -o-transform-origin:50% 87.097%;
        -ms-transform-origin:50% 87.097%;
}
#clock-h b,#clock-m b{width:0;height:0;font-size:0;border:3px dashed transparent;border-bottom:3px solid #333;position:absolute;left:0;top:-6px}
.big-mark,.small-mark{width:4px;height:12px;background:#333;position:absolute;left:50%;top:0;margin-left:-2px;
        transform-origin:50% 0%;
        -moz-transform-origin:50% 0%;
        -webkit-transform-origin:50% 0%;
        -o-transform-origin:50% 0%;
        -ms-transform-origin:50% 0%;
}
.small-mark{width:2px;height:5px;background:#999;margin-left:-1px}
.big-mark i{font:700 20px/1.5 Arial;position:absolute;left:-100%;top:12px}
.c60 i{font:700 20px/1.5 Arial;position:absolute;left:-200%;top:12px}
#clock-date{width:170px;height:24px;line-height:24px;background:#fff;color:#666;border:1px solid #ccc;text-align:center;position:absolute;left:50%;bottom:70px;margin:0 0 0 -85px;border-radius:6px}
</style>
<script type="text/javascript">
function clock(){
        var $=function(id){return document.getElementById(id)};
        //寫入刻度DOM，以及刻度的定位
        function mark(){
                //圓的半徑
                var r=parseFloat(window.getComputedStyle?window.getComputedStyle($("clock"),null).width:$("clock").currentStyle["width"])/2;
                //插入DOM
                for(var i=1;i<61;i++){
                        $("clock-mark").innerHTML+="<b class='c"+i+"'><i></i></b>";
                        var ci=document.getElementsByClassName("c"+i)[0];
                        var cii=ci.getElementsByTagName("i")[0];
                        //利用正弦定理計算刻度的定位
                        ci.style.left=r+r*(Math.sin(i*6*2*Math.PI/360))+"px";
                        /*注意正弦的角度制算法和弧度制算法，Math.sin的參數是弧度制算法，因此先把角度轉換成弧度，再計算*/
                        ci.style.top=r-r*(Math.sin((90-i*6)*2*Math.PI/360))+"px";
                        //計算轉動的角度
                        /*other*/
                        ci.style.transform="rotate("+i*6+"deg)";
                        /*FF*/
                        ci.style.MozTransform="rotate("+i*6+"deg)";
                        /*webkit*/
                        ci.style.WebkitTransform="rotate("+i*6+"deg)";
                        /*opera*/
                        ci.style.OTransform="rotate("+i*6+"deg)";
                        /*ms*/
                        ci.style.msTransform="rotate("+i*6+"deg)";
                        //大刻度
                        if(i%5==0){
                                ci.className="c"+i+" "+"big-mark";
                                cii.innerHTML=i/5;
                                }
                        //小刻度
                        else{
                                ci.className="c"+i+" "+"small-mark";
                                ci.removeChild(cii);
                                }
                        //把數字轉正
                        var iRotate=-i*6;
                        cii.style.transform="rotate("+iRotate+"deg)";
                        cii.style.MozTransform="rotate("+iRotate+"deg)";
                        cii.style.WebkitTransform="rotate("+iRotate+"deg)";
                        cii.style.OTransform="rotate("+iRotate+"deg)";
                        cii.style.msTransform="rotate("+iRotate+"deg)";
                        }
                }
        //指針的轉動
        function turnR(){
                var d=new Date();
                var h=d.getHours();
                var m=d.getMinutes();
                var s=d.getSeconds();
                var sRadius=360/60*s;
                var mRadius=360/60*m;
                //若是須要分針勻速移動，就賦值var mRadius=360/60*m+360/60/60*s
                var hRadius=360/12*h+30/60*m;
                var ch=$("clock-h");
                var cm=$("clock-m");
                var cs=$("clock-s");
                /*other*/
                ch.style.transform="rotate("+hRadius+"deg)";
                cm.style.transform="rotate("+mRadius+"deg)";
                cs.style.transform="rotate("+sRadius+"deg)";
                /*FF*/
                ch.style.MozTransform="rotate("+hRadius+"deg)";
                cm.style.MozTransform="rotate("+mRadius+"deg)";
                cs.style.MozTransform="rotate("+sRadius+"deg)";
                /*webkit*/
                ch.style.WebkitTransform="rotate("+hRadius+"deg)";
                cm.style.WebkitTransform="rotate("+mRadius+"deg)";
                cs.style.WebkitTransform="rotate("+sRadius+"deg)";
                /*opera*/
                ch.style.OTransform="rotate("+hRadius+"deg)";
                cm.style.OTransform="rotate("+mRadius+"deg)";
                cs.style.OTransform="rotate("+sRadius+"deg)";
                /*ms*/
                ch.style.msTransform="rotate("+hRadius+"deg)";
                cm.style.msTransform="rotate("+mRadius+"deg)";
                cs.style.msTransform="rotate("+sRadius+"deg)";
                setTimeout(turnR,1000);
                }
        /*顯示日期*/
        function clockDate(){
                var d=new Date();
                var week=["日","一","二","三","四","五","六"];
                $("clock-date").innerHTML=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+" 星期"+week[d.getDay()];
                }
        //調用函數
        mark();
        turnR();
        clockDate();
        }
window.onload=clock;
</script>
</head>
<body>
<div id="clock">
        <b class="clock-core"></b>
    <div id="clock-h">
            <b></b>
    </div>
    <div id="clock-m">
            <b></b>
    </div>
    <div id="clock-s"></div>
    <div id="clock-mark"></div>
    <div id="clock-date"></div>
</div>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。