Digital Clock Tutorial Custom Animated Clock

Learn some handy JavaScript fundamentals by working with its functions, variables, the Date object, a looped timer, communicating with page elements in real time, and more to create a custom animated digital clock that will run in all major browser software. <html> <head> <style> .clockStyle { background-color:#000; border:#999 2px inset; padding:6px; color:#0FF; font-family:"Arial Black", Gadget, sans-serif; font-size:16px; font-weight:bold; letter-spacing: 2px; display:inline; } </style> </head> <body> <h2>Javascript CSS Digital Clock Tutorial</h2> <div id="clockDisplay" class="clockStyle"></div> <script> function renderTime() { var currentTime = new Date(); var diem = "AM"; var h = currentTime.getHours(); var m = currentTime.getMinutes(); var s = currentTime.getSeconds(); setTimeout('renderTime()',1000); if (h == 0) { h = 12; } else if (h > 12) { h = h - 12; diem="PM"; } if (h < 10) { h = "0" + h; } if (m < 10) { m = "0" + m; } if (s < 10) { s = "0" + s; } var myClock = document.getElementById('clockDisplay'); myClock.textContent = h + ":" + m + ":" + s + " " + diem; myClock.innerText = h + ":" + m + ":" + s + " " + diem; } renderTime(); </script> </body> </html>

JavaScript Videos

Date and Time Programming

Digital Clock Tutorial Custom Animated ClockCountdown Timer Tutorial setTimeout clearTimeoutDate Time Countdown Tutorial Christmas 2012 DoomsdayScript Execution Timing Tutorial for Ajax Server CallsTV Screen Slideshow Timed Image Rotation Script Tutorial
Snap to Top
Home Page
Table of Contents
Donate / Support
Web Hosting
Terms of Use

webintersect.com
adamkhoury.com
© 2015 All Rights Reserved