반응형

javascript(jquery)를 활용하여 재생, 일시정지, 멈춤 기능이 있는 스탑워치를 만들어 보겠다.

시간은 시 분 초만 표시한다.

스톱워치

1. 재생버튼은 시작한다.

2. 일시정지 버튼은 잠시 멈추는 기능으로 재생버튼을 다시 누르면 기존 시간을 이어서 진행한다.

3. 멈춤 버튼은 스톱워치를 초기화하고 정지시킨다.

 

아래는 실제 동작 스톱워치이다.

 

00:00:00

 

 

 

 

index.html

<!DOCTYPE html>
<html>
<head>
<style>
	*{
		margin: 0px;
		padding: 0px;
	}
  	body{
		height: 100vh;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
 	}
 	.box{
		width: 200px;
		height: 200px;
	}
	.timerBox{
		width: 200px;
		outline: 2px solid black;
	}
	.timerBox .time{
		font-size: 30pt;
		color: #4C4C4C;
		text-align: center;
		font-family: sans-serif;
	}
	.btnBox{
		margin: 20px auto;
		text-align: center;
	}
	.btnBox .fa{
		margin: 0px 5px;
		font-size: 30pt;
		color: #FAED7D;
		cursor: pointer;
	}
</style>
<meta charset="UTF-8">
<title>StopWatch</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="stopwatch.js"></script>
</head>
<body>
	<div id='box' class="box">
		<div id='timerBox' class="timerBox">
			<div id="time" class="time">00:00:00</div>
		</div>
		<div class="btnBox">
			<i id="startbtn" class="fa fa-play" aria-hidden="true"></i>
			<i id="pausebtn" class="fa fa-pause" aria-hidden="true"></i>
			<i id="stopbtn" class="fa fa-stop" aria-hidden="true"></i>
		</div>
	</div>
</body>
</html>

버튼 이미지는 bootstrap cdn 이미지를 활용 하였다.

stopwatch.js

var time = 0;
var starFlag = true;
$(document).ready(function(){
  buttonEvt();
});

function init(){
  document.getElementById("time").innerHTML = "00:00:00";
}

function buttonEvt(){
  var hour = 0;
  var min = 0;
  var sec = 0;
  var timer;

  // start btn
  $("#startbtn").click(function(){

    if(starFlag){
      $(".fa").css("color","#FAED7D")
      this.style.color = "#4C4C4C";
      starFlag = false;

      if(time == 0){
        init();
      }

      timer = setInterval(function(){
        time++;

        min = Math.floor(time/60);
        hour = Math.floor(min/60);
        sec = time%60;
        min = min%60;

        var th = hour;
        var tm = min;
        var ts = sec;
        if(th<10){
        th = "0" + hour;
        }
        if(tm < 10){
        tm = "0" + min;
        }
        if(ts < 10){
        ts = "0" + sec;
        }

        document.getElementById("time").innerHTML = th + ":" + tm + ":" + ts;
      }, 1000);
    }
  });

  // pause btn
  $("#pausebtn").click(function(){
    if(time != 0){
      $(".fa").css("color","#FAED7D")
      this.style.color = "#4C4C4C";
      clearInterval(timer);
      starFlag = true;
    }
  });

  // stop btn
  $("#stopbtn").click(function(){
    if(time != 0){
      $(".fa").css("color","#FAED7D")
      this.style.color = "#4C4C4C";
      clearInterval(timer);
      starFlag = true;
      time = 0;
      init();
    }
  });
}
반응형