stopwatch

by 蔡 育曄

HTML

<div id='bg'>
  <button id='state'>開始</button>
  <button id='stop'>停止</button>
  <p id='op'>0</p>
</div>

<script src="https://code.jquery.com/jquery-2.1.4.min.js">


</script>

CSS

#bg {
  background-color: lightblue;
  height: 30vw;
  width: 50vw;
  text-align: center;
}

#state {
  position: absolute;
  text-align: center;
  top: 18vw;
  width: 19vw;
}

#stop {
  position: absolute;
  text-align: center;
  top: 22vw;
  width: 18.6vw;
}

#op {
  position: absolute;
  top: 10vw;
  width: 25vw;
  font-size: 300%;
}

JavaScript

var toggle = false;
$("#state").click(function() {
	toggle = !toggle; 
	if(toggle){
  	$("#state").text("暫停");
  	setTimeout(myAlert, 1000);
  }
  else{
  	$("#state").text("開始");
  }
})

$("#stop").click(function() {
	$("#state").text("開始");
  $("#op").text(0);
  toggle = false;
})

function myAlert() {
	if(toggle){
  	myAlert.counter =  $("#op").text();
    $("#op").text(++myAlert.counter);
    setTimeout(myAlert, 1000)  
    }
}