stujo/closure_clock.html

## closure_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>Closure Event Demo</h4>
<hr/>

<div>
<div class="wall"><span id="clock">&nbsp;</span></div>
<div class="buttons">
<button id="clock_start">Start</button>
<button id="clock_stop">Stop</button>
</div>
</div>

<script type="text/javascript">

function clocker(span_id, delay)
{
  var intervalHandle = null;

  // http://www.elated.com/articles/creating-a-javascript-clock/
  function updateClock()
  {
    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;
  }

  function getStartButton()
  {
    return document.getElementById(span_id + "_start");
  }

  function getStopButton()
  {
    return document.getElementById(span_id + "_stop")
  }

  function resetButtons()
  {
    if(intervalHandle)
    {
      getStartButton().disabled = true;
      getStopButton().disabled = false;
    }
    else
    {
      getStartButton().disabled = false;
      getStopButton().disabled = true;
    }
  }

  function startClock()
  {
    if(!intervalHandle)
    {
      // So we don't have to wait for the first update!
      updateClock();
      intervalHandle = setInterval(updateClock, delay);
      console.log("Starting Clock - intervalHandle = " + intervalHandle);
    }
    resetButtons();
  }

  function stopClock()
  {
    if(intervalHandle)
    {
      clearInterval(intervalHandle);
      intervalHandle = null;
      console.log("Stopped Clock - intervalHandle = " + intervalHandle);
    }
    resetButtons();
  }

  function assignButtonCallbacks()
  {
    getStartButton().onclick = startClock;
    getStopButton().onclick = stopClock;
  }

  assignButtonCallbacks();
  startClock();
}

window.addEventListener("load", function() {
  console.log("onload Handler setting up clock");
  clocker("clock", 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>Closure Event Demo</h4>
	<hr/>

	<div>
	<div class="wall"><span id="clock"> </span></div>
	<div class="buttons">
	<button id="clock_start">Start</button>
	<button id="clock_stop">Stop</button>
	</div>
	</div>

	<script type="text/javascript">

	function clocker(span_id, delay)
	{
	var intervalHandle = null;

	// http://www.elated.com/articles/creating-a-javascript-clock/
	function updateClock()
	{
	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;
	}

	function getStartButton()
	{
	return document.getElementById(span_id + "_start");
	}

	function getStopButton()
	{
	return document.getElementById(span_id + "_stop")
	}

	function resetButtons()
	{
	if(intervalHandle)
	{
	getStartButton().disabled = true;
	getStopButton().disabled = false;
	}
	else
	{
	getStartButton().disabled = false;
	getStopButton().disabled = true;
	}
	}

	function startClock()
	{
	if(!intervalHandle)
	{
	// So we don't have to wait for the first update!
	updateClock();
	intervalHandle = setInterval(updateClock, delay);
	console.log("Starting Clock - intervalHandle = " + intervalHandle);
	}
	resetButtons();
	}

	function stopClock()
	{
	if(intervalHandle)
	{
	clearInterval(intervalHandle);
	intervalHandle = null;
	console.log("Stopped Clock - intervalHandle = " + intervalHandle);
	}
	resetButtons();
	}

	function assignButtonCallbacks()
	{
	getStartButton().onclick = startClock;
	getStopButton().onclick = stopClock;
	}

	assignButtonCallbacks();
	startClock();
	}

	window.addEventListener("load", function() {
	console.log("onload Handler setting up clock");
	clocker("clock", 1000);
	}
	);

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