stopwatch

<?php

interface IStopwatch
{
    public function start();
    public function stop();
    public function lap();
}

class Stopwatch implements IStopwatch
{
    private $time;    // DateTime object
    private $running; // true of false
   
    // constructor, wordt automatisch aangeroepen als de class geïnstantieerd wordt 
    function __construct()
    {
		session_start();
		
		// standaard waardes: stopwatch uit, time = de huidige tijd
		$this->running = false;
		$this->time =  new DateTime('now');
		
		// indien er een tijd in de sessie wordt aangetroffen neem deze dan over
		if(isset($_SESSION['start_time']))
		{
			$this->time->setTimestamp($_SESSION['start_time']);
			$this->running = true;
		}
    }    
    
    public function start()
    {
		// verwijder netjes het oude DateTime object
		unset($this->time);
		
		// maak een nieuw DateTime object aan met de huidige tijd en sla die op in $_SESSION['start_time']
		$this->time =  new DateTime('now');
		$this->running = true;
		
		$_SESSION['start_time'] = $this->time->getTimestamp();
    }    
    
    public function stop()
    {
		// gebruik onze eigen functie lap() om de tijd te registeren en zet running op false
		$timetext = $this->lap();
		$this->running = false;
		
		// verwijder de sessie variabele
		unset($_SESSION['start_time']);
		
		// geef te stoptijd terug
		return $timetext;
    }
    
    public function lap()
    {
 		// stopwatch uit? return false
		if(!$this->running)
			return false;

		// anders verschil berekenen tussen de huidige tijd en de starttijd en deze teruggeven als string
		$interval = $this->time->diff(new DateTime('now'));
		return $interval->format('%h:%i:%s');   
    }
	
	public function isRunning()
	{
		// laat weten of de stopwatch loopt ja of nee
		return $this->running;
	}
}

$stopwatch = new Stopwatch();

// indien het formulier terug gestuurd wordt
if($_SERVER['REQUEST_METHOD'] == 'POST')
{
	//er is op start gedrukt
	if(isset($_POST['start']))
	{
		$stopwatch->start();
		echo 'stopwatch running	';
	}
	
	//er is op stop gedrukt
	if(isset($_POST['stop']))
	{
		if($stoptime = $stopwatch->stop())
			echo 'stoptime: ' . $stoptime;
		else
			echo 'stopwatch not running';
	}
		
	//er is op lap gedrukt
	if(isset($_POST['lap']))
	{
		if($laptime = $stopwatch->lap())
			echo 'time: ' . $laptime;
		else
			echo 'stopwatch not running';
	}
}

?>
<form action="" method="post" >
<input type="submit" name="start" value="Start" />
<input type="submit" name="stop" value="Stop" />
<input type="submit" name="lap" value="Lap" />
</form>

<script>
var controls = new Object();
window.onload = function() {
  controls.h      = document.getElementById('h');
  controls.m      = document.getElementById('m');
  controls.s      = document.getElementById('s');
  controls.c      = document.getElementById('c');
  controls.start  = document.getElementById('start');
  controls.lap    = document.getElementById('lap');
  controls.reset  = document.getElementById('reset');
  controls.lapDisplay   = document.getElementById('lap_display');
  controls.time   = 0;        // in centi seconds
  controls.state  = 'idle';   // idle or running
  controls.laps   = Array();
  
  controls.start.onclick = function() {
    if (controls.state == 'running') {
      controls.state = 'idle';
    }
    else {
      controls.state = 'running';
    }
    start_stop();
  }
  controls.lap.onclick = function() {
    displayLap();
  }
  controls.reset.onclick = function() {
    controls.time = 0;
    controls.lapDisplay.innerHTML = '';
    display();
  }
  function start_stop() {
    if (controls.state == 'running') {
      setTimeout(start_stop, 10);
    }
    display();
    controls.time++;
  }
  function display() {
    controls.c.value = centiseconds2time(controls.time, 'c');
    controls.s.value = centiseconds2time(controls.time, 's');
    controls.m.value = centiseconds2time(controls.time, 'm');
    controls.h.value = centiseconds2time(controls.time, 'h');
  }
  function displayLap() {
    controls.lapDisplay.innerHTML += '<p><span class="h">' + centiseconds2time(controls.time, 'h') + '</span>:<span class="m">' + centiseconds2time(controls.time, 'm') + '</span>:<span class="s">' + centiseconds2time(controls.time, 's') + '</span>.<span class="c">' + centiseconds2time(controls.time, 'c') + '</span></p>';
  }
  function centiseconds2time(time, format) {
    switch (format) {
      case 'c':
        var result = time % 100;
        break;
      case 's':
        var rest = (time - (time % 100)) / 100;
        var result = (rest % 60);
        break;
      case 'm':
        var rest = (time - (time % 6000)) / 6000;
        var result = (rest % 60);
        break;
      case 'h':
        var rest = (time - (time % 360000)) / 360000;
        var result = (rest % 60);
        break;
    }
    return result;
  }
}
</script>
<style>
#stopwatch input {
  width: 55px;
}
</style>
<div id="stopwatch">
  <input id="h">
  <input id="m">
  <input id="s">
  <input id="c">
  <input type="button" id="start" value="START">
  <input type="button" id="reset" value="RESET">
  <input type="button" id="lap" value="LAP">
  <div id="lap_display"></div>
</div>

Frank Nietbelangrijk op 14/10/2013 13:56:40

Kijk Dirk daar zat ik op te wachten.

Als ik je nu vertel dat PHP op de webserver draait en niet in de browser, en dat een php-script normaal gesproken een aantal milliseconden draait (voordat jij je webpagina te zien krijgt).

wat dan? Misschien toch maar javascript?

Tis puur om wat te leren omtrent clases. Ik snap dat het dan niet handig is.