SVG圓形鐘表效果

2018-6-2 20:10| 作者: 螞蟻小編| 查看: 4722| 評論: 0|來自: 螞蟻部落

分享一段代碼實例,它實現了圓形鐘表效果。

代碼實例如下:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.arpjr.tw/" />
<title>螞蟻部落</title>
<style type="text/css">
#clock {
  width: 200px;
  height: 200px;
  font-family: "微軟雅黑";
  font-weight: 800;
  -moz-user-select: none;
  -webkit-user-select: none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function() {
  var $clock = $('#clock');
  var currentdate = new Date();
  var hours = currentdate.getHours();
  hours = hours > 12 ? hours - 12 : hours;
  var minutes = currentdate.getMinutes();
  var seconds = currentdate.getSeconds();
  var $hours = $clock.find('#hours'),
    $minutes = $clock.find('#minutes'),
    $seconds = $clock.find('#seconds');
  $hours.attr('transform', 'rotate(' + hours * 30 + ' 100 100)');
  $minutes.attr('transform', 'rotate(' + minutes * 6 + ' 100 100)');
  $seconds.attr('transform', 'rotate(' + seconds * 6 + ' 100 100)');
  setInterval(function() {
    var currentdate = new Date();
    var hours = currentdate.getHours();
    hours = hours > 12 ? hours - 12 : hours;
    var minutes = currentdate.getMinutes();
    var seconds = currentdate.getSeconds();
    var $hours = $clock.find('#hours'),
      $minutes = $clock.find('#minutes'),
      $seconds = $clock.find('#seconds');
    $hours.attr('transform', 'rotate(' + hours * 30 + ' 100 100)');
    $minutes.attr('transform', 'rotate(' + minutes * 6 + ' 100 100)');
    $seconds.attr('transform', 'rotate(' + seconds * 6 + ' 100 100)');
  }, 1000);
});
</script>
</head>
<body>
<svg id="clock">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
  </defs>
  <circle id="clockcircle" cx="100" cy="100" r="88" fill="#999" />
  <circle filter="url(#f1)" id="clockcircle" cx="100" cy="100" r="85" fill="#000" />
  <circle cx="100" cy="100" r="5" fill="#fff" />
  <!--1點整-->
  <circle cx="137" cy="36" r="3" fill="#fff" />
  <!--2點整-->
  <circle cx="164" cy="63" r="3" fill="#fff" />
  <!--3點整-->
  <circle cx="175" cy="100" r="3" fill="#fff" />
  <!--4點整-->
  <circle cx="164" cy="137" r="3" fill="#fff" />
  <!--5點整-->
  <circle cx="137" cy="165" r="3" fill="#fff" />
  <!--6點整-->
  <circle cx="100" cy="175" r="3" fill="#fff" />
  <!--7點整-->
  <circle cx="63" cy="165" r="3" fill="#fff" />
  <!--8點整-->
  <circle cx="36" cy="137" r="3" fill="#fff" />
  <!--9點整-->
  <circle cx="25" cy="100" r="3" fill="#fff" />
  <!--10點整-->
  <circle cx="36" cy="63" r="3" fill="#fff" />
  <!--11點整-->
  <circle cx="63" cy="36" r="3" fill="#fff" />
  <!--12點整-->
  <circle cx="100" cy="26" r="3" fill="#fff" />
 
  <text font-size="16" x="90" y="46" fill="#fff">12</text>
  <text font-size="16" x="31" y="105" fill="#fff">9</text>
  <text font-size="16" x="94" y="170" fill="#fff">6</text>
  <text font-size="16" x="160" y="105" fill="#fff">3</text>
  <!--秒針-->
  <line id="seconds" x1="100" y1="110" x2="100" y2="28" stroke-width="2" stroke="#FFF" />
  <!--分針-->
  <line id="minutes" x1="100" y1="110" x2="100" y2="50" stroke-width="3" stroke="#fff" />
  <!--時針-->
  <line id="hours" x1="100" y1="110" x2="100" y2="60" stroke-width="4" stroke="#fff" />
</svg>
</body>
</html>

鮮花

握手

雷人

路過

雞蛋
返回頂部
大圣捕鱼2 pt电子游戏官网 极速赛车开奖走势图 pk10走势图计算 电子游戏娱乐 重庆时时全天计划50期 6码时时彩彩买什么号 网易彩票网手机版 澳门金龙真人秀时间 佩里西奇 重庆时时彩稳赚技巧 麒麟团队彩票计划app 时时走势图全部 埃弗顿 11选5计划苹果手机软件 龙城国际俱乐部怎么样 北京pk10走势分析软件