Question

我是html / css / javascript的初学者。我想创建一个时钟，我在这里有代码。但是，这段代码没有用，所以我想我某处有错误。

有人可以找到错误并告诉我如何修复它。

CSS

function clock() {
  var d, h, m, s;

  h = 30 * ((d.getHours() % 12) + d.getMinutes() / 60);
  m = 6 * d.getMinutes();
  s = 6 * d.getSeconds();

  setAttr('h-hand', h);
  setAttr('m-hand', m);
  setAttr('s-hand', s);
  setAttr('s-tail', s + 180);

  h = d.getHours();
  m = d.getMinutes();
  s = d.getSeconds();

  if (h >= 12) {
    setText('suffix', 'PM');
  } else {
    setText('suffix', 'AM');
  }

  if (h != 12) {
    h %= 12;
  }
};

function setAttr(id, val) {
  var v = 'rotate(' + val + ', 70, 70)';
  document.getElementById(id).setAttribute('transform', v);
};

function setText(id, val) {
  if (val < 10) {
    val = '0' + val;
  }
  document.getElementById(id).innerHTML = val;
};

#analog-clock {
  width: 140px;
  height: 140px;
}
#clock-face {
  stroke: black;
  fill: #ff9933;
}
#h-hand,
#m-hand,
#s-hand,
#s-tail {
  stroke: black;
  stroke-linecap: round;
}
#h-hand {
  stroke-width: 3px;
}
#m-hand {
  stroke-width: 2px;
}
#s-hand {
  stroke-width: 1px;
}

<div class="analog-clock">
  <svg width="140" height="140">
    <circle id="clock-face" cx="70" cy="70" r="65" />
    <line id="h-hand" x1="70" y1="70" x2="70" y2="38" />
    <line id="m-hand" x1="70" y1="70" x2="70" y2="20" />
    <line id="s-hand" x1="70" y1="70" x2="70" y2="12" />
    <line id="s-tail" x1="70" y1="70" x2="70" y2="56" />
    <text x="62" y="18">12</text>
    <text x="126" y="76">3</text>
    <text x="66" y="130">6</text>
    <text x="7" y="76">9</text>
  </svg>
  <div style="height: 10px;"></div>
  <div class="time-text">
    <span id="hr" style="color: #4d0099;">00</span>
    <span style="color: black;">:</span>
    <span id="min" style="color: #006633;">00</span>
    <span style="color: black;">:</span>
    <span style="color: #990000;" id="sec">00</span>
    <span id="suffix">--</span>
  </div>
</div>

Answer 1

你有d变量未定义。

宣布

var d = new Date(),
        h, m, s;

它会起作用。工作时钟here。

Answer 2

您需要使用当前日期初始化d变量。您也可以在clock()函数中调用setInterval来每秒更新一次时钟。不确定这是否是最佳解决方案，但至少它是有效的。

示例：http://jsbin.com/cegutilavo/edit?js,console,output

第3和第40行。

模拟时钟javascript / html / css无效

2 个答案: