{"id":24223,"date":"2016-08-19T03:01:35","date_gmt":"2016-08-18T17:01:35","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=24223"},"modified":"2019-11-09T18:47:13","modified_gmt":"2019-11-09T08:47:13","slug":"analogue-clock-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/analogue-clock-primer-tutorial\/","title":{"rendered":"Analogue Clock Primer Tutorial"},"content":{"rendered":"
\"Analogue<\/a>

Analogue Clock Primer Tutorial<\/p><\/div>\n

Today we’re writing a web application with HTML and CSS3 and Javascript DOM functionality to write a fairly minimalist Greenwich Mean Time (GMT) analogue clock. It’s early days with this project, and today’s work is just a “first draft”.<\/p>\n

Although we could, we decide against using the HTML5 canvas<\/a> element for this job, showing you a fairly pared down HTML solution relying on Javascript DOM<\/a> dynamic application of the principles of CSS3 transform<\/a> property.<\/p>\n

This is one of those ironic situations where a computer program is more involved, with presenting an analogue view of something, rather than a digital view, which does not involve much more than the rearrangement of the characters of what the Javascript Date’s objects toUTCString<\/a> method returns to you. In fact, in today’s code we go “through” this toUTCString method’s return value, and work with that to derive the angle required for the “ourbrg” variable of the Javascript (DOM) code snippet below …<\/p>\n


\n try { document.getElementById('compass_needle' + hands[i]).style.webkitTransform = (\" rotate(\" + (ourbrg) + \"deg)\"); } catch(e10) { }
\n try { document.getElementById('compass_needle' + hands[i]).style.MozTransform = (\" rotate(\" + (ourbrg) + \"deg)\"); } catch(e10) { }
\n try { document.getElementById('compass_needle' + hands[i]).style.msTransform = (\" rotate(\" + (ourbrg) + \"deg)\"); } catch(e10) { }
\n try { document.getElementById('compass_needle' + hands[i]).style.OTransform = (\" rotate(\" + (ourbrg) + \"deg)\"); } catch(e10) { }
\n try { document.getElementById('compass_needle' + hands[i]).style.transform = (\" rotate(\" + (ourbrg) + \"deg)\"); } catch(e10) { }
\n<\/code><\/p>\n

The rest of what makes the analogue clock tick … chortle, chortle<\/font> … channels what we so often channel around here at this blog relating to “overlay”<\/a> principles, and the usual list of “suspects”, shall we say, being …<\/p>\n