超酷的圆盘时钟表

最新推荐文章于 2023-01-21 18:53:20 发布

刀刃上的你

最新推荐文章于 2023-01-21 18:53:20 发布

阅读量4.3k

点赞数 1

分类专栏： Web前端开发文章标签： javascript jquery HTML5 CSS3

本文链接：https://blog.csdn.net/zl_jay/article/details/38534045

版权

Web前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

 
 <!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> 
 
  <meta http-equiv= 
  "Content-Type" 
  content= 
  "text/html; charset=utf-8" 
  /> 
 
  <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>