stujo/clock.html

## clock.html
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<style>
  body
  {
    margin: 0 40px;
  }

  h4 { margin-top: 5px }

  #clock{
    font-size: 4em;
  }

  .wall
  {
    text-align: center;
    border: 2px solid #333;
    padding: 20px;
    margin: 20px;
  }

  .buttons
  {
    text-align: center;
    font-size: 2em;
  }

  .buttons button
  {
    border-radius: 5px;
  }

  button[disabled]
  {
    color: #999;
  }

</style>

</head>
<body>
<h4>Simple Clock Demo</h4>
<hr/>

<div>
<div class="wall"><span id="clock">&nbsp;</span></div>
</div>


<script type="text/javascript">


// http://www.elated.com/articles/creating-a-javascript-clock/
function updateClock()
{
  var span_id = "clock";

  var currentTime = new Date ( );

  console.log("Updating " + span_id + " at " + currentTime);

  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(span_id).innerHTML = currentTimeString;
}


setInterval(updateClock, 1000);


</script>
</body>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
	<style>
	body
	{
	margin: 0 40px;
	}

	h4 { margin-top: 5px }

	#clock{
	font-size: 4em;
	}

	.wall
	{
	text-align: center;
	border: 2px solid #333;
	padding: 20px;
	margin: 20px;
	}

	.buttons
	{
	text-align: center;
	font-size: 2em;
	}

	.buttons button
	{
	border-radius: 5px;
	}

	button[disabled]
	{
	color: #999;
	}

	</style>

	</head>
	<body>
	<h4>Simple Clock Demo</h4>
	<hr/>

	<div>
	<div class="wall"><span id="clock"> </span></div>
	</div>


	<script type="text/javascript">


	// http://www.elated.com/articles/creating-a-javascript-clock/
	function updateClock()
	{
	var span_id = "clock";

	var currentTime = new Date ( );

	console.log("Updating " + span_id + " at " + currentTime);

	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(span_id).innerHTML = currentTimeString;
	}


	setInterval(updateClock, 1000);


	</script>
	</body>
	</html>