stopwatch
<!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;
    }
  }
  
}

stopwatch

  • Files
  • Index
  • Style
  • Script
  • README
  • CDN Add
HTML
PLEASE WAIT...