Payament
Free Photos
WordPress Themes

Javascript Stopwatch using JavaScript and CSS

HTML
<h2><time>00:00:00</time></h2> <button id="start">START</button> <button id="stop">STOP</button> <button id="clear">RESET</button>
CSS
body { color: #DAD6D6; background: #171A21; text-align: center; } #start { margin: 40px auto; text-align: center; color: #DAD6D6; background: #48633B; border:solid 2px #35492C; border-radius:5px; padding:16px 40px 16px; letter-spacing: 2px; cursor:pointer; } #stop { margin: 40px 5px auto; text-align: center; color: #DAD6D6; background: #721329; border:solid 2px #590F20; border-radius:5px; padding:16px 40px 16px; letter-spacing: 2px; cursor:pointer; } #clear { margin: 40px auto; text-align: center; color: #DAD6D6; background: #564E58; border:solid 2px #3E383F; border-radius:5px; padding:16px 40px 16px; letter-spacing: 2px; cursor:pointer; } h2 { font-size: 46px; letter-spacing: 2px; margin: 200px 0 0 ; }
JAVASCRIPT
var h1 = document.getElementsByTagName('h2')[0], start = document.getElementById('start'), stop = document.getElementById('stop'), clear = document.getElementById('clear'), seconds = 0, minutes = 0, hours = 0, t; function add() { seconds++; if (seconds >= 60) { seconds = 0; minutes++; if (minutes >= 60) { minutes = 0; hours++; } } h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds); timer(); } function timer() { t = setTimeout(add, 1000); } timer(); /* Start button */ start.onclick = timer; /* Stop button */ stop.onclick = function() { clearTimeout(t); } /* Clear button */ clear.onclick = function() { h1.textContent = "00:00:00"; seconds = 0; minutes = 0; hours = 0; }
Expand for more options Login