SVG圓形鐘錶效果

螞蟻小編發表於2018-06-02
SVG
分享一段程式碼例項，它實現了圓形鐘錶效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章