Tryit Editor v1.4

<html> <head> <script type="text/javascript"> function getDigits() { num=new Array("0fdr.gif","1fdr.gif","2fdr.gif","3fdr.gif","4fdr.gif","5fdr.gif","6fdr.gif","7fdr.gif","8fdr.gif","9fdr.gif"); time=new Date(); hour=time.getHours() if (hour<10) { document.getElementById('hour1').src=num[0]; h2="'" + hour + "'"; h2=h2.charAt(1); document.getElementById('hour2').src=num[h2]; } else { h1="'" + hour + "'"; h1=h1.charAt(1); document.getElementById('hour1').src=num[h1]; h2="'" + hour + "'"; h2=h2.charAt(2); document.getElementById('hour2').src=num[h2]; } minute=time.getMinutes(); if (minute<10) { document.getElementById('minute1').src=num[0]; m2="'" + minute + "'"; m2=m2.charAt(1); document.getElementById('minute2').src=num[m2]; } else { m1="'" + minute + "'"; m1=m1.charAt(1); document.getElementById('minute1').src=num[m1]; m2="'" + minute + "'"; m2=m2.charAt(2); document.getElementById('minute2').src=num[m2]; } second=time.getSeconds(); if (second<10) { document.getElementById('second1').src=num[0]; s2="'" + second + "'"; s2=s2.charAt(1); document.getElementById('second2').src=num[s2]; } else { s1="'" + second + "'"; s1=s1.charAt(1); document.getElementById('second1').src=num[s1]; s2="'" + second + "'"; s2=s2.charAt(2); document.getElementById('second2').src=num[s2]; } } function showTime() { timer=setTimeout("getDigits()",10); interval=setInterval("getDigits()",1000); } function stopInterval() { clearTimeout(timer); clearInterval(interval); } </script> </head> <body onload="showTime()" onunload="stopInterval()" bgcolor="#000000"> <img id="hour1" /> <img id="hour2" /> <img id="minute1" /> <img id="minute2" /> <img id="second1" /> <img id="second2" /> </body> </html> | Your Result:
Edit the code above and click to see the result. | W3Schools.com - Try it yourself