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;
}
2 Responses