JavaScript时钟无效

时间:2016-02-10 10:10:46

标签: javascript html css raphael

我正在使用Raphael为我的网站制作一个简单的时钟。我试图绘制秒针,让它像普通时钟一样打勾。

以下是我正在运行的代码:

window.onload = function() {

  var paper = new Raphael(0, 0, 400, 400);

  var backGround = paper.rect(0, 0, 400, 400);

  backGround.attr({
    fill: "orange"
  });

  var face = paper.circle(100, 100, 95);
  face.attr({
    "fill": "#f5f5f5",
    "stroke": "#ff0000",
    "stroke-width": "3"
  })

  var hand = paper.path("M100 110L100 25");
  hand.attr({
    stroke: "#ffff00",
    "stroke-width": 1
  });

  function startTime() {
    var hands = now.getSeconds();
    hands = checkTime(hands);
    hand.animate({
      transform: ['r', ((hands * 6) - 180), 200, 200]
    });

    setTimeout(function() {
      startTime()
    }, 1000);

    function checkTime(i) {
      if (i < 10) {
        i = "0" + i
      };
      return i;

    }
    startTime();

  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>

1 个答案:

答案 0 :(得分:0)

  • 您需要在功能本身之外启动时间功能
  • 您错过了新的日期声明
  • 我也动了手到100x100
  • 删除了无用的第二格式化程序。
  • 将手改为黑色以便更好地看待

&#13;
&#13;
window.onload = function() {

  var paper = new Raphael(0, 0, 400, 400);

  var backGround = paper.rect(0, 0, 400, 400);

  backGround.attr({
    fill: "orange"
  });

  var face = paper.circle(100, 100, 95);
  face.attr({
    "fill": "#f5f5f5",
    "stroke": "#ff0000",
    "stroke-width": "3"
  })

  var hand = paper.path("M100 110L100 25");
  hand.attr({
    stroke: "#000000",
    "stroke-width": 1
  });

  function startTime() {
    var now = new Date(),
        hands = now.getSeconds();
    hand.animate({
      transform: ['r', ((hands * 6) - 180), 100, 100]
    });

    setTimeout(function() {
      startTime()
    }, 1000);
  }
  startTime();

}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
&#13;
&#13;
&#13;