jquery+html5制作超酷的圓盤時鐘表

更新時間：2015年04月14日 11:44:07 投稿：hebedich

此作品是一款jquery+html5實現(xiàn)的時鐘插件clock，效果非常棒，推薦給大家參考下，小伙伴們可以直接拿走使用。

自己封裝的一個用HTML5+jQuery寫的時鐘表

代碼：

<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>超酷數(shù)碼鐘表</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
//引用的是在線jquery地址，如果不行請自行下載切換
(function($){
  $.fn.drawClock = function(options){
    var mainId = $(this);
     
    //設置默認參數(shù)
    var defaultOptions = {
      'width': '300px',
      'height': '300px',
      'margin': '200px auto',
      'border': '1px solid #888',
      'border-radius': '50%',
      'box-shadow': '2px 2px 4px #111'
    };
    var options = $.extend(defaultOptions, options);
     
    mainId.css({
      'width': options.width, 
      'height': options.height, 
      'margin': options.margin,
      'border': options.border,
      'border-radius': options['border-radius'],
      'box-shadow': options['box-shadow'], 
      'position': 'relative'
    }).css({
      'background': '-webkit-gradient(radial, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', 0, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', ' + mainId.width()/2 + ', from(#ffe), to(#eee))', 
      'background': '-moz-radial-gradient(circle closest-side, #ffe 0%, #eee 100%)'
    });
     
    //鐘表盤中心圓
    $("<div id='circle'></div>").appendTo(mainId).css({
      'width': '20px',
      'height': '20px',
      'border-radius': '50%',
      'box-shadow': '0 0 5px rgba(0,0,0,0.8)',
      'position': 'absolute',
      'z-index': 999,
      'background': '-webkit-gradient(radial, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', 0, ' + mainId.width()/2 + ' ' + mainId.height()/2 + ', ' + mainId.width()/2 + ', from(#ffe), to(#eee))',
      'background': '-moz-radial-gradient(circle, #eee 30%, #ffe 100%)'
    }).css({
      'left': mainId.width()/2 - $('#circle').width()/2,
      'top': mainId.height()/2 - $('#circle').height()/2
    });
     
    var dateTime = new Date();
    var oHours = dateTime.getHours();
    var oMinutes = dateTime.getMinutes();
    var oSeconds = dateTime.getSeconds();
     
    //初始化時分秒
    var hPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(3/6), 5, "#333", -90+oHours*30+oMinutes*6/12);
    var mPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(4/6), 4, "#666", -90+oMinutes*6);
    var sPointer = drawPointer(mainId.width()/2, mainId.height()/2, mainId.width()/2*(5/6), 3, "#f00", -90+oSeconds*6);
     
    //運動時分秒
    var timer = setInterval(function(){
      dateTime = new Date();
      oHours = dateTime.getHours();
      oMinutes = dateTime.getMinutes();
      oSeconds = dateTime.getSeconds();    
      hPointer.css({'transform': 'rotate(' + (-90+oHours*30+oMinutes*6/12) + 'deg)'});
      mPointer.css({'transform': 'rotate(' + (-90+oMinutes*6) + 'deg)'});
      sPointer.css({'transform': 'rotate(' + (-90+oSeconds*6) + 'deg)'});
    }, 1000);
     
     
    //繪制鐘表刻度
    for(var i=0; i<60; i++){
      var width = 3, height = 6, oBcolor = '#111';
      if(i%5 == 0){
        width = 5;
        height = 10;
      }
      if(i%15 == 0){
        oBcolor = 'red';
      }
      $("<div class='clockMark'></div>").appendTo(mainId).css({
        'width': width,
        'height': height,
        'position': 'absolute',
        'top': 0,
        'left': mainId.width()/2,
        'background': oBcolor,
        'transform': 'rotate(' + i*6 + 'deg)',
        "transform-origin": "0 " + mainId.width()/2+'px'
      });
    }
     
    //繪制鐘表指針
    function drawPointer (startx, starty, width, height, bcolor, angle) {
      var oPointer = $("<div></div>");
      oPointer.appendTo(mainId).css({
        'width': width,
        'height': height,
        'position': 'absolute',
        'top': starty,
        'left': startx,
        'background': bcolor,
        'transform': 'rotate(' + angle + 'deg)',
        'transform-origin': '0 0'
      });
      return oPointer;
    }
     
    return this;
  }
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
  $('#clock').drawClock();
});
</script>
</head>
 
<body>
  <div id="clock"></div>
</body>
</html>

演示圖：

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

jQuery實現(xiàn)影院選座訂座效果
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)影院選座訂座效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
jQuery總體架構的理解分析
jQuery總體架構的理解,學習jquery的朋友可以參考下。
2011-03-03
騰訊與新浪的通過IP地址獲取當前地理位置（省份）的接口
通過IP地址獲取當前地理位置（省份）的接口，方便大家可以直接使用結合自己的系統(tǒng)。
2010-07-07
使用jQuery的easydrag插件實現(xiàn)可拖動的DIV彈出框
EasyDrag 是一個用來實現(xiàn)頁面元素拖拉的 jQuery 插件。接下來通過本文給大家介紹使用jQuery的easydrag插件實現(xiàn)可拖動的DIV彈出框，感興趣的朋友一起學習吧
2016-02-02
Jquery實現(xiàn)仿騰訊娛樂頻道焦點圖(幻燈片)特效
這篇文章主要介紹了Jquery實現(xiàn)仿騰訊娛樂頻道焦點圖(幻燈片)特效,需要的朋友可以參考下
2015-03-03
jQuery繼承extend用法詳解
這篇文章主要為大家詳細介紹了jQuery繼承extend用法,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
jQuery簡易時光軸實現(xiàn)方法示例
這篇文章主要介紹了jQuery簡易時光軸實現(xiàn)方法,可實現(xiàn)點擊底部鏈接動態(tài)加載內(nèi)容的功能,涉及jQuery響應鼠標事件動態(tài)操作頁面元素屬性的相關實現(xiàn)技巧,需要的朋友可以參考下
2017-03-03
jQuery插件cxSelect多級聯(lián)動下拉菜單實例解析
這篇文章主要為大家詳細解析了jQuery插件cxSelect多級聯(lián)動下拉菜單實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-06-06
jQuery選擇器之子元素過濾選擇器
這篇文章主要為大家詳細介紹了jQuery選擇器之子元素過濾選擇器的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-09-09
jquery簡單瀑布流實現(xiàn)原理及ie8下測試代碼
可以將分頁獲取的內(nèi)容依次填入四個div中，瀑布流的分頁可以以多頁（比如5頁）為單位二次分頁，這樣可以減少后臺算法的復雜度;測試環(huán)境：ie8 ff13.0.1 chrome22有興趣的朋友可以了解下
2013-01-01