SVG圆形钟表效果

2018-6-2 20:10| 作者: 蚂蚁小编| 查看: 630| 评论: 0|来自: 蚂蚁部落

分享一段代码实例,它实现了圆形钟表效果。

代码实例如下:

[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>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部