DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js+css3制作時鐘特效
js+css3制作時鐘特效
編輯：關於JavaScript     

我們先來看看效果圖吧

再來奉上源碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS3 鐘表</title>
  <style>
    .clock{
      position: relative;
      width: 200px;
      height: 200px;
      border-radius: 110px;
      border: 10px solid #000;
      margin: 200px auto;
    }
    .line1,.line4{
      position: absolute;
      background-color: #aaa;
      width: 10px;
      height: 200px;
      left: 50%;
      margin-left: -5px;
    }
    .line2,.line3,.line5,.line6{
      position: absolute;
      background-color: #ccc;
      width: 8px;
      height: 200px;
      left: 50%;
      margin-left: -4px;
    }
    .line2{
      transform: rotate(30deg);
    }
    .line3{
      transform: rotate(60deg);
    }
    .line4{
      transform: rotate(90deg);
    }
    .line5{
      transform: rotate(120deg);
    }
    .line6{
      transform: rotate(150deg);
    }
    .cover{
      position: absolute;
      width: 180px;
      height: 180px;
      background-color: #fff;
      left: 50%;
      top: 50%;
      margin: -90px 0 0 -90px;
      border-radius: 90px;
    }
    .dotted{
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #000;
      border-radius: 10px;
      left: 50%;
      top: 50%;
      z-index: 2;
      margin: -10px 0 0 -10px;
    }
    .hour{
      position: absolute;
      width: 10px;
      height: 60px;
      background-color: #ccc;
      left: 50%;
      top: 50%;
      margin: -60px 0 0 -5px;
    }
    .minute{
       position: absolute;
       width: 8px;
       height: 70px;
       background-color: #ddd;
       left: 50%;
       top: 50%;
      margin: -70px 0 0 -4px;
     }
    .seconds{
      position: absolute;
      width: 6px;
      height: 80px;
      background-color: red;
      left: 50%;
      top: 50%;
      margin: -80px 0 0 -3px;
    }
    .minute,.hour,.seconds{
      transform-origin: center bottom;
    }
  </style>
  <script>
    window.onload = function () {
      var hour = document.querySelector(".hour");
      var minute = document.querySelector(".minute");
      var second = document.querySelector(".seconds");
      var h = 0,m = 0,s = 0,ms =0;
      setInterval(fn,10);
      function fn () {
        var date = new Date();
        ms = date.getMilliseconds();
        s = date.getSeconds()+ms/1000;
        m = date.getMinutes()+s/60;
        h = date.getHours()%12+m/60;
        second.style.WebkitTransform = "rotate("+s*6+"deg)";
        minute.style.WebkitTransform = "rotate("+m*6+"deg)";
        hour.style.WebkitTransform = "rotate("+h*30+"deg)";
      }
    }
  </script>
</head>
<body>
<div class="clock">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
  <div class="line4"></div>
  <div class="line5"></div>
  <div class="line6"></div>
  <div class="cover"></div>
  <div class="dotted"></div>
  <div class="hour"></div>
  <div class="minute"></div>
  <div class="seconds"></div>
</div>
</body>
</html>

再給大家分享一個網友的作品

<!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>

關於JavaScript
JavaScript數組常用方法
判斷某個對象是否是數組: instanceof、Array.isArray()對於一個網頁或者一個全
js獲取上傳文件的絕對路徑實現方法
在html中 <input type=file id=importFile /> &
詳解JavaScript for循環中發送AJAX請求問題
首先說，出現這個問題的場景是很少見的，因為有太多更好解決方法。今天搞ajax的時候，一個有趣的地方，

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
jQuery插件boxScroll實現圖片輪播特效 使用JavaScript數組上的經驗之談 JS表格組件神器bootstrap table詳解（基礎版） 淺談JSON.stringify()和JOSN.parse()方法的不同 javascript實現日期時間動態顯示示例代碼 各浏覽器對click方法的支持差異小結 IE和Firefox的Javascript兼容性總結[推薦收藏] javascript 大中小字體顯示實現代碼 5個最佳的Javascript日期處理類庫分享 onkeydown事件解決按回車鍵直接提交數據的需求
熱門推薦
原生js圖片輪播效果實現代碼 不使用浏覽器運行javascript代碼的方法 js中通過getElementsByName訪問name集合對象的方法 淺談javascript控制HTML5的全屏操控,浏覽器兼容的問題 淺析javascript中的DOM JavaScript實現在頁面間傳值的使用方法 JavaScript實現的GBK、UTF8字符串實際長度計算函數 js實現的簡單圖片浮動效果完整實例 Javascript 5種方法實現過濾刪除前後所有空格
大家都在看
Content-type的說明即HTTP請求頭的類型整理 JavaScript模擬實現鍵盤打字效果 javascript日期操作詳解(腳本之家整理) JS彈出可拖拽可關閉的div層完整實例 解決jquery實現的radio重新選中的問題 CSS工作原理及CSS規則命名介紹 人氣超高的HTML5特效排行榜TOP 10 用ajax xml的數據讀取的HelloWorld程序
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved