Yash Jain Yash Jain - 3 months ago 28
CSS Question

Analog clock made out javascript/html/css not working

I am a beginner in html/css/javascript. I want to create a clock and I have the code over here. However, this code is not working so I suppose that I have an error somewhere.

Can someone please find the error and tell me how to fix it.

CSS

#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;
}


HTML

<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>


JAVASCRIPT

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;
};

Answer

You need to initialize the d variable with current Date. Also you can put the clock() call in the setInterval function to update your clock every second. Not sure if this is a best solution, but at least it works.

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

Lines 3 and 40.

Comments