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
删除了无用的第二格式化程序。
将手改为黑色以便更好地看待

＆＃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;

JavaScript时钟无效

1 个答案: