Return to Snippet

Revision: 56325
at March 22, 2012 03:41 by pixelatorz


Initial Code
/************************************
	HTML
************************************/


<div id="timer">
				<h3>MIJN TIJD</h3>
				<div id="minutes">
					<div id="m1">0</div>
					<div id="m2">0</div>
				</div>
				<div id="seconds">
					<div id="s1">0</div>
					<div id="s2">0</div>
				</div>
				<div id="hundredths">
					<div id="h1">0</div>
					<div id="h2">0</div>
					<div id="h3">0</div>
				</div>
			</div>


/************************************
	TIMER
************************************/

var startDate;
var intervalId = 0;

function startTimer(){
	//datum om de vergelijking mee te maken
	startDate = new Date();
	intervalId = setInterval(setTimer, 11);	
	
}

function stopTimer(){
	clearInterval(intervalId);
	
}

function setTimer(){
	//hier trekken we de start datum af van de huidige datum om het verschil te krijgen in miliseconden
	var currentDate = new Date();
	var difference = currentDate - startDate;
	
	//console.log(difference);
	
	//functie om de tijd terug te geven	
	formatTime(difference);

}

function formatTime(ms){
	
	//nummers omzetten naar de leesbare getallen
	var sec = Math.floor(ms/1000)
	ms = ms % 1000
	t = three(ms)
	
	var min = Math.floor(sec/60)
	sec = sec % 60
	t = two(sec) + t

	min = min % 60
	t = two(min) + t

	//console.log(t);
	//in een array steken en die reversen om de juiste waarde op te halen
	var timeArray = t.split("").reverse();
	
	$("#m1").text(timeArray[6]);
	$("#m2").text(timeArray[5]);
	
	$("#s1").text(timeArray[4]);
	$("#s2").text(timeArray[3]);
	
	$("#h1").text(timeArray[2]);
	$("#h2").text(timeArray[1]);
	$("#h3").text(timeArray[0]);

}
//plaats een 0 indien de waarde korter dan 2 getallen
function two(x) {return ((x>9)?"":"0")+x}
function three(x) {return ((x>99)?"":"0")+((x>9)?"":"0")+x}

Initial URL


Initial Description
simple html + javascript timer.

Initial Title
javascript timer

Initial Tags
javascript

Initial Language
JavaScript