我是html/css/javascript的初學者。我想創建一個時鐘,我在這裏有代碼。但是,這段代碼無法正常工作,所以我想我在某個地方有一個錯誤。模擬時鐘發了javascript/html/css不能正常工作
有人可以找到錯誤,並告訴我如何解決它。
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>
究竟什麼是你的問題?你的CSS失敗了?你的Javascript失敗默默無聞?您需要幫助調試問題?您不確定如何將問題簡化爲最小,完整的代碼以允許其他人爲您提供幫助? – zhon