- Files
- Index
- Style
- Script
- README
- CDN Add
PLEASE WAIT...
<!doctype html>
<html>
<body>
<div class="wrapper">
<h1>Stopwatch</h1>
<h2>Vanilla JavaScript Stopwatch</h2>
<p><span id="second">00</span>:<span id="tens">00</span></p>
<button id="button-start">Start</button>
<button id="button-stop">Stop</button>
<button id="button-reset">Reset</button>
</div>
</body>
</html>$orange:#ffa600;
$grey:#f3f3f3;
$white:#fff;
$base-color:orange;
@include transition{
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}
@include corners($radius){
-moz-border-radius:$radius;
-webkit-border-radius:$radius;
border-radius:$radius;
-Khtml-border-radius:$radius;
}
body{
background:$base-color;
font-family: "HelveticaNeue-Light","Helvetica Neue Light",
"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
height:100%;
}
.wrapper{
width:800px;
margin:30px auto;
color:$white;
text-align:center;
}
h1,h2,h3{
font-family:'Roboto',sans-serif;
font-weight: 100;
font-size: 2.6em;
text-transform: uppercase;
}
#seconds,#tens{
font-size:2em;
}
button{
@include corners (5px);
background:$base-color;
color:$white;
border:solid 1px $white;
text-decoration:none;
cursor: pointer;
font-size:1.2em;
padding:18px 10px;
margin:10px;
outline:none;
&:hover{
@include transition;
background:$white;
border:solid 1px $white;
color:base-color;
}
}window.onload=function(){
var seconds=00;
var tens=00;
var appendTens=document.getElementById("tens")
var appendSeconds=document.getElementById("seconds")
var buttonStart=document.getElementById('button-start');
var buttonStop=document.getElementById('button-stop');
var buttonReset=document.getElementById('button-reset');
var Interval;
buttonStart.onclick=function(){
clearInterval(Interval);
Interval=setInterval(startTimer,10);
}
buttonStop.onclick=function(){
clearInterval(Interval);
}
buttonReset.onclick=function(){
clearInterval(Interval);
tens="00";
seconds="00";
appendTens.innerHTML=tens;
appendseconds.innerHTML=seconds;
}
function startTimer(){
tens++;
if(tens<=9){
appendTens.innerHTML="0"+tens;
}
if(tens>9){
appendTens.innerHTML=tens;
}
if (tens>99){
console.log("seconds");
seconds++;
appendSeconds.innerHTML="0"+seconds;
tens=0;
appendTens.innerHTML="0"+0;
}
if(seconds>9){
appendSeconds.innerHTML=seconds;
}
}
}