JavaScript 时钟不工作

JavaScript clock not working

本文关键字：工作 时钟 JavaScript      更新时间：2023-09-26

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

    您需要在函数
  • 本身之外启动时间函数
  • 您错过了新的日期语句
  • 我还把手移到了 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>

相关文章：