JavaScript 时钟不工作

Question

我正在使用 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>

Answer 1

• 您需要在函数本身之外启动时间函数
• 您错过了新的日期声明
• 我也将手移动到 100x100
• 删除了无用的第二个格式化程序。
• 将手变成黑色以便看得更清楚

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();

}

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