アナログ時計がjavascript/html/cssで作成されていません

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変数を現在の日付で初期化する必要があります。また、setInterval関数にclock()コールを入れて、毎秒時計を更新することもできます。これが最善の解決策であるかどうかは確かではありませんが、少なくとも機能します。

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

線3と40

Answer 2

はあなたがd変数未定義持っています。

は

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

宣言し、それが動作します。働く時計here。