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

2019-11-20 12:40:55

字體：大中小

來源：轉載

供稿：網友

自己封裝的一個用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>超酷數碼鐘表</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);         //設置默認參數    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>

演示圖：