[javascript] clock 만들기
2. 엄청난 시계다!
https://www.youtube.com/watch?v=9dtDaWi6R0g
1. source
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>JavaScript Clock</title>
<!--
JavaScript Clock example
Copyright Elated Communications Ltd 2007
www.elated.com
-->
<style type="text/css">
#clock { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; color: white; background-color: black; border: 2px solid purple; padding: 4px; }
</style>
<script type="text/javascript">
<!--
function init ( )
{
timeDisplay = document.createTextNode ( "" );
document.getElementById("clock").appendChild ( timeDisplay );
}
function updateClock ( )
{
var currentTime = new Date ( );
var currentHours = currentTime.getHours ( );
var currentMinutes = currentTime.getMinutes ( );
var currentSeconds = currentTime.getSeconds ( );
// Pad the minutes and seconds with leading zeros, if required
currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
// Choose either "AM" or "PM" as appropriate
var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
// Convert the hours component to 12-hour format if needed
currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
// Convert an hours component of "0" to "12"
currentHours = ( currentHours == 0 ) ? 12 : currentHours;
// Compose the string for display
var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
// Update the time display
document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}
// -->
</script>
</head>
<body onload="updateClock(); setInterval('updateClock()', 1000 )">
<div style="clear: both;"> </div>
<h1>The JavaScript clock in action</h1>
<p>View the source of this page to see how it works. Feel free to use the JavaScript in your own Web pages!</p>
<div style="width: 10em; text-align: center; margin: 20px auto;">
<span id="clock">2:56:59 PM</span>
</div>
<p><a href="/articles/creating-a-javascript-clock/">Return to the article</a></p>
<p><small>All code in this page is copyright 2007 <a href="http://www.elated.com">Elated Communicatons Ltd</a></small></p>
</body></html>