반응형
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();
}
});
}반응형
'WEB > Javascript' 카테고리의 다른 글
| Javascript - sort() / 정렬 메소드 사용하기 (0) | 2019.09.08 |
|---|---|
| Javascript - for in 반복문을 사용하여 출력하기 (0) | 2019.09.08 |
| Javascript - for문을 setTimeout 메소드를 활용하여 일정 시간마다 출력하기(클로저 Closure) (2) | 2019.09.08 |
| Javascript - 함수(Function)를 사용하는 이유, 문법 (0) | 2019.09.08 |
| Javascript - 달팽이 배열 생성하기(snail Array) (0) | 2019.09.08 |