One-Button Stopwatch

Hanhart

On 1 July 1882, the Swiss watchmaker Johann A. Hanhart opened a watch shop in Diessenhofen, in north-eastern Switzerland. In 1902, he relocated his business to Schwenningen, southern Germany. In 1924, Hanhart launched its first stopwatch, and a short time later, the product range was extended to include pocket watches and wristwatches. From 1932 onwards, following the death of his father, Wilhelm Julius Hanhart concentrated on manufacturing raw movements. In 1938, the first single-button chronograph with the "Calibre 40" entered series production, pilot’s chronographs followed in 1939.

Source: https://en.wikipedia.org/wiki/Hanhart
retrieved on 16 October 2016

See also: www.hanhartusa.com/images/Graphics/Hanhart_Stopwatches%20Catalogue_EN.pdf

JavaScript

Chronograph.js

function Chronograph() {
    
  var whenStarted = 0;
  var whenStopped = 0;
  
  this.reset = function() {
    whenStarted = 0;
    whenStopped = 0;
  }
  this.start = function() {
    whenStarted = new Date();
  }
  this.stop = function() {
    whenStopped = new Date();
  }
  this.hasBeenStarted = function() {
    return whenStarted > 0;
  }
  this.isStopped = function() {
    return whenStopped >= whenStarted;
  }
  this.isRunning = function() {
    return whenStarted > whenStopped;
  }
  this.elapsedTimeInMs = function() {
    if (this.isRunning()) {
      return new Date() - whenStarted;        
    }
    else {
      return whenStopped - whenStarted;        
    }
  }
}

Stopwatch1Movement.js

function Stopwatch1Movement() {

  var previouslyElapsedTimeInMs = 0;
  var timer = new Chronograph();

  this.startStop = function() {
    if (!timer.hasBeenStarted()) {
      timer.start();
    }
    else if (timer.isRunning()) {
        timer.stop();
    }
    else {
      previouslyElapsedTimeInMs = this.elapsedTimeInMs();
      timer.start();
    }
  }
  this.reset = function() {
    previouslyElapsedTimeInMs = 0;
    timer.reset();
  }
  this.isRunning = function() {
    return timer.isRunning();
  }
  this.elapsedTimeInMs = function() {
    return previouslyElapsedTimeInMs + timer.elapsedTimeInMs();
  }
}

Stopwatch1.js

function Stopwatch1(movement) {
  if (!(movement instanceof Stopwatch1Movement)) {
    movement = new Stopwatch1Movement();
  }
  this.pressCrownButton = function() {
    movement.startStop();
  }  
  this.elapsedTimeInMs = function() {
    return movement.elapsedTimeInMs();
  }
  this.isRunning = function() {
    return movement.isRunning();
  }
}

Stopwatch1Gui.js

function Stopwatch1Gui(stopwatch1) {    
  var that = this;
  if (!(stopwatch1 instanceof Stopwatch1)) {
    stopwatch1 = new Stopwatch1();
  }
  this.stopwatch = stopwatch1;
  (function connectCrownButtion() {
    function listener(e) {
      console.log("GUI's crown button pressed.");
      //console.log("Event:"); console.log(e);
      that.pressCrownButton.call(that);
    }
    that.crownButton.addEventListener("click", listener);
  })();  
}
Stopwatch1Gui.prototype = {
  displayTime: function() {
    console.log("Displaying time.");
    this.timeValue.innerHTML = this.stopwatch.elapsedTimeInMs();
  },
  periodicallyRefreshDisplay: function() {
    var that = this;
    function repeat() {
      function doIt() {
        that.displayTime.call(that);
        repeat();            
      }
      if (that.stopwatch.isRunning() &&
          that.gui.window != null) {
        setTimeout(doIt, that.refreshRateInMs);
      }
    }
    repeat();
  },
  pressCrownButton: function() {
    this.stopwatch.pressCrownButton();
    if (this.stopwatch.isRunning()) {
      this.periodicallyRefreshDisplay.call(this);
    }
  },
};

Stopwatch1GuiA.js

function Stopwatch1GuiA(stopwatch1) {

  // Configuration values  
   var GUI_WIDTH = "400";
   var GUI_HEIGHT = "150";
   var CROWN_BUTTON_NAME = "Start/Stop";
   var UNITS_LABEL = "ms";
   var INITIAL_TIME = "0";
   var INITIAL_LABEL = "Elapsed time:";

  // Stopwatch container
  this.gui = window.open
    ("", "", "width="+GUI_WIDTH+",height="+GUI_HEIGHT);
    
  // Alias for this.gui.document
  var doc = this.gui.document;

  // Crown button
  doc.write("<center><button id='crownButton'>");
  doc.write(CROWN_BUTTON_NAME);
  doc.write("</button></center>");

  // Time display
  doc.write("<br><center><h1>");
  doc.write("<span id='timeLable'>");
  doc.write(INITIAL_LABEL+"</span>");
  doc.write("&nbsp;<span id='timeValue'>");
  doc.write(INITIAL_TIME+"</span>");
  doc.write("&nbsp;<span id='timeUnits'>");
  doc.write(UNITS_LABEL+"</span>");
  doc.write("</h1></center>");  

  // DOM elements
  this.crownButton = doc.getElementById("crownButton");
  this.timeLabel = doc.getElementById("timeLabel");
  this.timeValue = doc.getElementById("timeValue");
  this.timeUnits = doc.getElementById("timeUnits");
  
  // Constructor chaining
  Stopwatch1Gui.call(this, stopwatch1);
}

// Prototype chaining
Stopwatch1GuiA.prototype = Object.create(Stopwatch1Gui.prototype);

// Additional shared properties
Stopwatch1GuiA.prototype.refreshRateInMs = 25;

Stopwatch.html

<script src="Chronograph.js"></script>
<script src="Stopwatch1Movement.js"></script>
<script src="Stopwatch1.js"></script>
<script src="Stopwatch1Gui.js"></script>
<script src="Stopwatch1GuiA.js"></script>
<button onclick="new Stopwatch1GuiA;">New Stopwatch</button>

Java

./com/blogspot/finnegantakes/Chronograph.js

package com.blogspot.finnegantakes;

public class Chronograph {
    
  private long whenStarted = 0;
  private long whenStopped = 0;
  
  public void reset() {
    whenStarted = 0;
    whenStopped = 0;
  }
  public void start() {
    whenStarted = System.currentTimeMillis();
  }
  public void stop() {
    whenStopped = System.currentTimeMillis();
  }
  public boolean hasBeenStarted() {
    return whenStarted > 0;
  }
  public boolean isStopped() {
    return whenStopped >= whenStarted;
  }
  public boolean isRunning() {
    return whenStarted > whenStopped;
  }
  public long elapsedTimeInMs() {
    if (isRunning()) {
      return System.currentTimeMillis() - whenStarted;        
    }
    else {
      return whenStopped - whenStarted;        
    }
  }
}

./com/blogspot/finnegantakes/Stopwatch1Movement.java

package com.blogspot.finnegantakes;

import com.blogspot.finnegantakes.Chronograph;

public class Stopwatch1Movement {

  private long previouslyElapsedTimeInMs = 0;
  private Chronograph timer;

  public Stopwatch1Movement() {
    this.timer = new Chronograph();
  }
  public void startStop() {
    if (!timer.hasBeenStarted()) {
      timer.start();
    }
    else if (timer.isRunning()) {
        timer.stop();
    }
    else {
      previouslyElapsedTimeInMs = elapsedTimeInMs();
      timer.start();
    }
  }
  public void reset() {
    previouslyElapsedTimeInMs = 0;
    timer.reset();
  }
  public boolean isRunning() {
    return timer.isRunning();
  }
  public long elapsedTimeInMs() {
    return previouslyElapsedTimeInMs + timer.elapsedTimeInMs();
  }
}

./com/blogspot/finnegantakes/Stopwatch1.java

package com.blogspot.finnegantakes;

import com.blogspot.finnegantakes.Stopwatch1Movement;

public class Stopwatch1 {

  private Stopwatch1Movement movement;

  public Stopwatch1() {
    this(new Stopwatch1Movement());
  }  
  public Stopwatch1(Stopwatch1Movement movement) {
    this.movement = movement;
  }  
  public void pressCrownButton() {
    movement.startStop();
  }  
  public long elapsedTimeInMs() {
    return movement.elapsedTimeInMs();
  }
  public boolean isRunning() {
    return movement.isRunning();
  }
}

./com/blogspot/finnegantakes/Stopwatch1Gui.java

package com.blogspot.finnegantakes;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JButton;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
import javax.swing.Timer;
import com.blogspot.finnegantakes.Stopwatch1;

public abstract class Stopwatch1Gui {
    
  protected JLabel timeLabel = new JLabel();
  protected JLabel timeValue = new JLabel();
  protected JLabel timeUnits = new JLabel();
  protected JButton crownButton = new JButton();
  protected JFrame gui = new JFrame();
  private Stopwatch1 stopwatch;
  
  Stopwatch1Gui(Stopwatch1 stopwatch1) {
    stopwatch = stopwatch1;
    connectCrownButton();
    periodicallyRefreshDisplay();
  }
  protected void displayTime() {
    this.timeValue.setText(Long.toString(stopwatch.elapsedTimeInMs()));
  }
  protected void periodicallyRefreshDisplay() {
    final int PERIOD_MS = 100;
    ActionListener listener = new ActionListener() {
      public void actionPerformed(ActionEvent evt) {
        displayTime();
      }
    };
    new javax.swing.Timer(PERIOD_MS, listener).start();      
  }
  protected void connectCrownButton() {
    crownButton.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent e) {
        stopwatch.pressCrownButton();
      }
    });      
  }
  public void pressCrownButton() {
    stopwatch.pressCrownButton();
  }
}

./com/blogspot/finnegantakes/Stopwatch1GuiA.java

package com.blogspot.finnegantakes;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JButton;
import java.awt.FlowLayout;
import com.blogspot.finnegantakes.Stopwatch1Gui;

public class Stopwatch1GuiA extends Stopwatch1Gui {

  private final int GUI_WIDTH = 325;
  private final int GUI_HEIGHT = 75;
  private final String CROWN_BUTTON_NAME = "Start/Stop";
  private final String UNITS_LABEL = "ms";
  private final String INITIAL_TIME = "0";
  private final String INITIAL_LABEL = "Elapsed time: ";
    
  public Stopwatch1GuiA() {
    this(new Stopwatch1());
  }
  public Stopwatch1GuiA(Stopwatch1 stopwatch1) {
    super(stopwatch1);
    crownButton.setText(CROWN_BUTTON_NAME);
    timeLabel.setText(INITIAL_LABEL);
    timeValue.setText(INITIAL_TIME);
    timeUnits.setText(UNITS_LABEL);
    gui.getContentPane().setLayout(new FlowLayout());
    gui.getContentPane().add(crownButton);
    gui.getContentPane().add(timeLabel);
    gui.getContentPane().add(timeValue);
    gui.getContentPane().add(timeUnits);
    gui.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    gui.setSize(GUI_WIDTH, GUI_HEIGHT);
    gui.setVisible(true);      
  }
}

./Stopwatch.java

import com.blogspot.finnegantakes.Stopwatch1GuiA;

public class Stopwatch {
  public static void main(String[] args) {
    new Stopwatch1GuiA();
  }
}

To and Fro

?

“Stage Right” HTML

<h1 id="stageRight">?</h1>

Buttons HTML

<button onclick="hideToAndFro(); toAndFro.stop();">Stop</button>
<button onclick="hideToAndFro(); toAndFro.go();">Go</button>
<button onclick="toAndFro.showThis(); showToAndFro();">this</button>

JavaScript

<script>

function showToAndFro() {
  document.getElementById("toAndFro").setAttribute("style", "display:inline");
}

function hideToAndFro() {
  document.getElementById("toAndFro").setAttribute("style", "display:none");
}

function Oscillation(string1, string2, frequencyInMs) {

  var keepGoing;
  var showString1 = true;
  var whereToShow = document.getElementById("stageRight");

  function show(someString) {
    whereToShow.innerHTML = someString;
  }

  function showOneStringThenTheOther() {
    show(showString1 ? string1 : string2);
    setTimeout(showTheOther, frequencyInMs);
  }

  function showTheOther() {
    showString1 = !showString1;
    if (keepGoing) {
      showOneStringThenTheOther();
    }
  }

  this.go = function() {
    if (!keepGoing) {
      keepGoing=true;
      showOneStringThenTheOther();
    }
  }

  this.stop = function() {
    keepGoing = false;
  }

  this.showThis = function() {
    show(this.toString());
  }

  this.toString = function() {
    return "an Oscillation that goes " + string1 + " and " + string2;
  }
}

var toAndFro = new Oscillation("Back", "Forth", 1000);

</script>

Copy of HTML and JavaScript for display purposes only

<pre id="toAndFro" style="display:none">


&lt;h1 id=&quot;stageRight&quot;&gt;?&lt;/h1&gt;
&lt;button onclick=&quot;hideToAndFro(); toAndFro.stop();&quot;&gt;Stop&lt;/button&gt;
&lt;button onclick=&quot;hideToAndFro(); toAndFro.go();&quot;&gt;Go&lt;/button&gt;
&lt;button onclick=&quot;toAndFro.showThis(); showToAndFro();&quot;&gt;this&lt;/button&gt;

&lt;script&gt;

function showToAndFro() {
  document.getElementById("toAndFro").setAttribute("style", "display:inline");
}

function hideToAndFro() {
  document.getElementById("toAndFro").setAttribute("style", "display:none");
}

function Oscillation(string1, string2, frequencyInMs) {

  var keepGoing;
  var showString1 = true;
  var whereToShow = document.getElementById("stageRight");

  function show(someString) {
    whereToShow.innerHTML = someString;
  }

  function showOneStringThenTheOther() {
    show(showString1 ? string1 : string2);
    setTimeout(showTheOther, frequencyInMs);
  }

  function showTheOther() {
    showString1 = !showString1;
    if (keepGoing) {
      showOneStringThenTheOther();
    }
  }

  this.go = function() {
    if (!keepGoing) {
      keepGoing=true;
      showOneStringThenTheOther();
    }
  }

  this.stop = function() {
    keepGoing = false;
  }

  this.showThis = function() {
    show(this.toString());
  }

  this.toString = function() {
    return "an Oscillation that goes " + string1 + " and " + string2;
  }
}

var toAndFro = new Oscillation("Back", "Forth", 1000);

&lt;/script&gt;
</pre>

A Better Stopwatch

Newest stopwatch!

Note: To embed the following HTML and JavaScript within <pre></pre> tags and
make it display as desired, I used the JavaScript Code to HTML Converter
at http://www.itadmintools.com/2013/06/javascript-code-to-html-converter.html
I also avoided Blogger's Compose editor and only used the HTML editor.

<h1 id="betterStopwatchDisplay">Newest stopwatch!</h1>
<br>
<button onclick="betterStopwatch.pressLeftButton()">Left</button>
<button onclick="betterStopwatch.pressTopButton()">Top</button>
<br>

<script>
/** Timer ********************************************
 *
 *  A timer is a specialized type of clock for
 *  measuring time intervals.
 *
 *  Source: https://en.wikipedia.org/wiki/Timer
 *          retrieved on 13 Oct 2016
 */
function Timer() {
  var timeStarted = null;
  var timeStopped = null;

  this.reset = function() {
    timeStarted = null;
    timeStopped = null;
  }
  this.start = function() {
    timeStarted = new Date();
  }
  this.stop = function() {
    timeStopped = new Date();
  }
  this.isStarted = function() {
    return timeStarted != null;
  }
  this.isStopped = function() {
    return timeStopped != null;
  }
  this.isRunning = function() {
    return this.isStarted() && !this.isStopped();
  }
  this.elapsedTimeInMs = function() {
    if (timeStarted != null) {
      if (timeStopped != null) {
        return timeStopped - timeStarted;
      }
      else {
        return new Date() - timeStarted;
      }
    }
    else {
      return 0;
    }
  }
}

/** Horology *********************************************************
 *
 *  Horology (via Latin horologium ... literally "the study of time")
 *  ... is the art or science of measuring time.
 *
 *  Source: https://en.wikipedia.org/wiki/Horology
 *          retrieved 13 Oct 2016
 */
/** Movement *********************************************************
 *
 *  In horology, a movement, also known as a caliber, is the mechanism
 *  of a clock or watch, as opposed to the case, which encloses and
 *  protects the movement, and the face which displays the time. 
 *
 *  Source: https://en.wikipedia.org/wiki/Movement_(clockwork)
 *          retrieved on 13 Oct 2016
 */
function StopwatchMovement(timer) {
  var isFrozenBit = false;
  var previousElapsedTimeInMs = 0;

  /** METHOD: onTopButtonPress
   *  I. Manages the movement's timer:
   *    If the timer has not been not started:
   *      Then sets previous elapsed time to zero,
   *      And then starts the timer. 
   *    Else if the timer is running:
   *      Then stops timer.
   *    Else:
   *      Sets previous elapsed time to current elapsed time,
   *      And then restarts the timer.
   *  II. Sets a value that may affect the display:
   *    Sets isFrozenBit equal to false.
   *  Returns:
   *    Total elapsed time in milliseconds as of the point
   *    in time when the timer was stopped or when the method
   *    returns.
   */
  this.onTopButtonPressed = function() {
    if (!timer.isStarted()) {
      previousElapsedTimeInMs = 0;
      timer.start();
    }
    else if (timer.isRunning()) {
        timer.stop();
    }
    else {
      previousElapsedTimeInMs = this.elapsedTimeInMs();
      timer.reset();
      timer.start();
    }
    isFrozenBit = false;
    return this.elapsedTimeInMs();
  }
  /** METHOD: onLeftButtonPress
   *  I. Manages the movement's timer and values that may
   *     affect the display:
   *    If the timer is running:
   *      Toggles the (boolean) value of isFrozenBit,
   *      And then returns the current elapsed time. 
   *    Else:
   *      Resets the timer,
   *      Sets the previous elapsed time to zero,
   *      Sets the value of isFrozenBit to false,
   *      And then returns zero.
   *  Returns:
   *    Total elapsed time in milliseconds as of the point
   *    in time when the method returns.
   */
  this.onLeftButtonPressed = function() {
    if (timer.isRunning()) {
      isFrozenBit = !isFrozenBit;
      return this.elapsedTimeInMs();
    }
    else {
      timer.reset();
      previousElapsedTimeInMs = 0;
      isFrozenBit = false;
      return 0;
    }
  }
  this.isRunning = function() {
    return timer.isRunning();
  }
  this.isFrozen = function() {
    return isFrozenBit;
  }
  this.elapsedTimeInMs = function() {
    return previousElapsedTimeInMs + timer.elapsedTimeInMs();
  }
}

/** Stopwatch **************************************************
 *
 *  A stopwatch is a handheld timepiece designed to measure
 *  the amount of time elapsed from a particular time when it
 *  is activated to the time when the piece is deactivated.
 * 
 *  The timing functions are traditionally controlled by two
 *  buttons on the case. Pressing the top button starts the
 *  timer running, and pressing the button a second time stops
 *  it, leaving the elapsed time displayed. A press of the
 *  second button then resets the stopwatch to zero. The second
 *  button is also used to record split times or lap times.
 *  When the split time button is pressed while the watch is
 *  running, the display freezes, allowing the elapsed time to
 *  that point to be read, but the watch mechanism continues
 *  running to record total elapsed time. Pressing the split
 *  button a second time allows the watch to resume display of
 *  total time.
 *
 *  Source: https://en.wikipedia.org/wiki/Stopwatch
 *          retrieved on 12 Oct 2016
 */
function TraditionalStopwatch(movement, face, refreshPeriod) {

  function periodicallyUpdateDisplay() {
    function doItAndRepeat() {
        if (!movement.isFrozen()) {
          face.display(movement.elapsedTimeInMs());
        }
        periodicallyUpdateDisplay();
    }
    if (movement.isRunning()) {
      setTimeout(doItAndRepeat, refreshPeriod);
    }
  }

  this.pressTopButton = function() {
    face.display(movement.onTopButtonPressed());
    periodicallyUpdateDisplay();
  }
  this.pressLeftButton = function() {
    face.display(movement.onLeftButtonPressed());
  }
}

/** A Clock Face ****************************************************
 *
 *  Clocks existed before clock faces. The first mechanical clocks,
 *  built in 13th-century Europe, were striking clocks: their purpose
 *  was to ring bells upon the canonical hours, to call the public to
 *  prayer. ... These were erected as tower clocks in public places,
 *  to ensure that the bells were audible. It was not until these
 *  mechanical clocks were in place that their creators realized that
 *  their wheels could be used to drive an indicator on a dial on the
 *  outside of the tower, where it could be widely seen.
 *
 *  Source: https://en.wikipedia.org/wiki/Clock_face
 *          retrieved on 13 Oct 2016
 */
var clockFace = {
  display: function(value) {
    document.getElementById("betterStopwatchDisplay").innerHTML = value;
  }
}

/** A New Stopwatch **/
var betterStopwatch
  = new TraditionalStopwatch(new StopwatchMovement(new Timer()), clockFace, 25);
</script>

import java.awt.BorderLayout;
import java.awt.Graphics;
import java.awt.Point;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionAdapter;

import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;

/** Timer ********************************************
 *
 *  A timer is a specialized type of clock for
 *  measuring time intervals.
 *
 *  Source: https://en.wikipedia.org/wiki/Timer
 *          retrieved on 13 Oct 2016
 */
class Timer {
  private long timeStarted;
  private long timeStopped;
  Timer() {
    this.reset();
  }
  void reset() {
    this.timeStarted = -1;
    this.timeStopped = -1;
  }
  void start() {
    this.timeStarted = System.currentTimeMillis();
  }
  void stop() {
    this.timeStopped = System.currentTimeMillis();
  }
  boolean isStarted() {
    return this.timeStarted != -1;
  }
  boolean isStopped() {
    return this.timeStopped != -1;
  }
  boolean isRunning() {
    return this.isStarted() && !this.isStopped();
  }
  long elapsedTimeInMs() {
    if (this.timeStarted != -1) {
      if (this.timeStopped != -1) {
        return this.timeStopped - this.timeStarted;
      }
      else {
        return System.currentTimeMillis() - this.timeStarted;
      }
    }
    else {
      return -1;
    }
  }
}

/** Horology *********************************************************
 *
 *  Horology (via Latin horologium ... literally "the study of time")
 *  ... is the art or science of measuring time.
 *
 *  Source: https://en.wikipedia.org/wiki/Horology
 *          retrieved 13 Oct 2016
 */
/** Movement *********************************************************
 *
 *  In horology, a movement, also known as a caliber, is the mechanism
 *  of a clock or watch, as opposed to the case, which encloses and
 *  protects the movement, and the face which displays the time. 
 *
 *  Source: https://en.wikipedia.org/wiki/Movement_(clockwork)
 *          retrieved on 13 Oct 2016
 */
class StopwatchMovement {

  private boolean isFrozenBit = false;
  private long previousElapsedTimeInMs = 0;
  private Timer timer;

  StopwatchMovement(Timer timer) {
    this.timer = timer;
  }

  /** METHOD: onTopButtonPress
   *  I. Manages the movement's timer:
   *    If the timer has not been not started:
   *      Then sets previous elapsed time to zero,
   *      And then starts the timer. 
   *    Else if the timer is running:
   *      Then stops timer.
   *    Else:
   *      Sets previous elapsed time to current elapsed time,
   *      And then restarts the timer.
   *  II. Sets a value that may affect the display:
   *    Sets isFrozenBit equal to false.
   *  Returns:
   *    Total elapsed time in milliseconds as of the point
   *    in time when the timer was stopped or when the method
   *    returns.
   */
  long onTopButtonPressed() {
    if (!timer.isStarted()) {
      previousElapsedTimeInMs = 0;
      timer.start();
    }
    else if (timer.isRunning()) {
        timer.stop();
    }
    else {
      previousElapsedTimeInMs = this.elapsedTimeInMs();
      timer.reset();
      timer.start();
    }
    isFrozenBit = false;
    return this.elapsedTimeInMs();
  }
  /** METHOD: onLeftButtonPress
   *  I. Manages the movement's timer and values that may
   *     affect the display:
   *    If the timer is running:
   *      Toggles the (boolean) value of isFrozenBit,
   *      And then returns the current elapsed time. 
   *    Else:
   *      Resets the timer,
   *      Sets the previous elapsed time to zero,
   *      Sets the value of isFrozenBit to false,
   *      And then returns zero.
   *  Returns:
   *    Total elapsed time in milliseconds as of the point
   *    in time when the method returns.
   */
  long onLeftButtonPressed() {
    if (timer.isRunning()) {
      isFrozenBit = !isFrozenBit;
      return this.elapsedTimeInMs();
    }
    else {
      timer.reset();
      previousElapsedTimeInMs = 0;
      isFrozenBit = false;
      return 0;
    }
  }
  boolean isRunning() {
    return timer.isRunning();
  }
  boolean isFrozen() {
    return isFrozenBit;
  }
  long elapsedTimeInMs() {
    return previousElapsedTimeInMs + timer.elapsedTimeInMs();
  }
}

/** Stopwatch **************************************************
 *
 *  A stopwatch is a handheld timepiece designed to measure
 *  the amount of time elapsed from a particular time when it
 *  is activated to the time when the piece is deactivated.
 * 
 *  The timing functions are traditionally controlled by two
 *  buttons on the case. Pressing the top button starts the
 *  timer running, and pressing the button a second time stops
 *  it, leaving the elapsed time displayed. A press of the
 *  second button then resets the stopwatch to zero. The second
 *  button is also used to record split times or lap times.
 *  When the split time button is pressed while the watch is
 *  running, the display freezes, allowing the elapsed time to
 *  that point to be read, but the watch mechanism continues
 *  running to record total elapsed time. Pressing the split
 *  button a second time allows the watch to resume display of
 *  total time.
 *
 *  Source: https://en.wikipedia.org/wiki/Stopwatch
 *          retrieved on 12 Oct 2016
 */
class TraditionalStopwatch {

  private StopwatchMovement movement;
  private ClockFace face;
  private int refreshPeriod;

  TraditionalStopwatch(
      StopwatchMovement movement,
      ClockFace face,
      int refreshPeriod) {

    this.movement = movement;
    this.face = face;
    this.refreshPeriod = refreshPeriod;
  }
  void periodicallyUpdateDisplay() {
    face.display(movement.elapsedTimeInMs());
    /* still working on it... */
  }

  void pressTopButton() {
    face.display(movement.onTopButtonPressed());
    periodicallyUpdateDisplay();
  }
  void pressLeftButton() {
    face.display(movement.onLeftButtonPressed());
  }
}

/** A Clock Face ****************************************************
 *
 *  Clocks existed before clock faces. The first mechanical clocks,
 *  built in 13th-century Europe, were striking clocks: their purpose
 *  was to ring bells upon the canonical hours, to call the public to
 *  prayer. ... These were erected as tower clocks in public places,
 *  to ensure that the bells were audible. It was not until these
 *  mechanical clocks were in place that their creators realized that
 *  their wheels could be used to drive an indicator on a dial on the
 *  outside of the tower, where it could be widely seen.
 *
 *  Source: https://en.wikipedia.org/wiki/Clock_face
 *          retrieved on 13 Oct 2016
 */
class ClockFace {
  JLabel output;
  ClockFace() {
    this.output = new JLabel("Java stopwatch!");
    JFrame frame = new JFrame("Traditional Stopwatch");
    frame.getContentPane().add(output, BorderLayout.CENTER);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setSize(400, 300);
    frame.setVisible(true);
  }
  void display(Long value) {
    output.setText(value.toString());
  }
}

class BetterStopwatch {
  public static void main(String[] args) {
    TraditionalStopwatch betterStopwatch
      = new TraditionalStopwatch(new StopwatchMovement(new Timer()), new ClockFace(), 1000);
  }
}

Traditional Stopwatch

Here is a JavaScript implementation of a traditional stopwatch that has a Timer and displays elapsed times in milliseconds.

New stopwatch!

A stopwatch is a handheld timepiece designed to measure the amount of time elapsed from a particular time when it is activated to the time when the piece is deactivated.

The timing functions are traditionally controlled by two buttons on the case. Pressing the top button starts the timer running, and pressing the button a second time stops it, leaving the elapsed time displayed. A press of the second button then resets the stopwatch to zero. The second button is also used to record split times or lap times. When the split time button is pressed while the watch is running, the display freezes, allowing the elapsed time to that point to be read, but the watch mechanism continues running to record total elapsed time. Pressing the split button a second time allows the watch to resume display of total time.

Source: https://en.wikipedia.org/wiki/Stopwatch (retrieved on 12 Oct 2016)

Wait for it...

This is an example of a JavaScript solution to Exercise[20].

<!-
The following HTML markup and embedded JavaScript
code has been tested in version 53.0.2785.143 m of
the Chrome web browser and might not work as intended
in other versions of Chrome or in other web browsers.
->

<script>

var popupWindow;

function openPopup() {
  waitForIt(2000);
  popupWindow = window.open("", "", "width=200,height=100");
  popupWindow.document.write("Surprise!");
}

function closePopup() {
  if (popupWindow != undefined) {
    popupWindow.close();
  }
}

/*
 * Timer is a constructor function that may be
 * used to produces instances of objects of 
 * type Timer. An object of type Timer has
 * methods start() and stop() that start
 * and stop a timer, a method called reset
 * that resets a timer, and a method called
 * elaspedTimeInMs that returns an amount of
 * elapsed time. If a timer has been started
 * but not stopped, then elapsedTimeInMs
 * returns the amount of time (in milliseconds)
 * that has elapsed since the timer was started.
 * If a timer has been started and stopped,
 * then elapsedTimeInMs returns the amount of
 * time that elapsed between the time the
 * timer was started and stopped.
 */
function Timer() {
  this.reset();
}
Timer.prototype = {
  reset: function() {
    this.timeStarted = null;
    this.timeStopped = null;
  },
  start: function() {
    this.timeStarted = new Date();
  },
  stop: function() {
    this.timeStopped = new Date();
  },
  elapsedTimeInMs() {
    if (this.timeStarted != null) {
      if (this.timeStopped != null) {
        return this.timeStopped - this.timeStarted;
      }
      else {
        return new Date() - this.timeStarted;
      }
    }
    else {
      return undefined;
    }
  }
};

/*
 * pause does nothing for timeInMs millisends
 * before returning control to the code that
 * called pause. Internally, pause uses a
 * Timer object to wait the specified
 * amount of time before completing.
 */
function pause(timeInMs) {
  // Previously missing code starts here:
  var timer = new Timer();
  timer.start();
  // Previously, missing code ends here.
  while (timer.elapsedTimeInMs() < timeInMs);
}

function waitForIt(delay) {
    alert("Wait for it...");
    pause(delay);
}

</script>

<button onclick="openPopup()">open</button>
<button onclick="closePopup()">close</button>