728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>스탑워치</title>
<body>
<div id="total">
<div id="header">
<b>스탑 워치</b>
</div>
<div id="body">
<div id="frame">
<div id="clock">
<div id="time">
<span>00:00</span>
</div>
</div>
<div id="button_box">
<button onclick="play()">▶</button>
<button onclick="stop()">일시정지</button>
<button onclick="reset()">초기화</button>
<button onclick="min5()" name="min5">5분</button>
<button onclick="min3()" name="min3">3분</button>
<button onclick="min1()" name="min1">1분</button>
</div>
</div>
</div>
</div>
</body>
<script>
var timer = 0;
var min = 0;
var sec = 0;
var count = 0;
//지정값이 0이될떄까지 지정값을 1초씩 떨어트리는 함수 a()
function a() {
if(timer !=-1){
min = parseInt(timer/60);
sec = timer%60;
count = (min > 9 ? min : "0" + min) + ":" + (sec > 9 ? sec : "0" + sec)
console.log(count);
document.getElementById("time").innerHTML = "<span>" + (min > 9 ? min : "0" + min) + ":" + (sec > 9 ? sec : "0" + sec) + "</span>" ;
timer--;
if(timer ==-1) {
clearInterval(result);
}
}
}
// isPlaying으로 재생 정지 제어
// 재생버튼 누를시 setInterval로 1초마다 a()함수 즉 카운팅함수 실행
var result = 0;
var isPlaying = false;
function play() {
if(isPlaying == false) {
result = setInterval(a,1000)
isPlaying = true;
}
}
//정지버튼 누를시 interval 종료 및 isPlaying 변경
function stop() {
clearInterval(result)
isPlaying = false;
console.log("일시정지")
}
//리셋버튼 누를시 초기화 및 정지 및 isPlaying 변경
function reset() {
timer = 0;
min = 0;
sec = 0;
document.getElementById("time").innerHTML = "<span>" + (min > 9 ? min : "0" + min) + ":" + (sec > 9 ? sec : "0" + sec) + "</span>" ;
clearInterval(result)
isPlaying = false;
count = (min > 9 ? min : "0" + min) + ":" + (sec > 9 ? sec : "0" + sec)
console.log(count)
}
//스톱워치 시간 설정 버튼
function min5() {
timer = 300;
document.getElementById("time").innerHTML = "<span>05:00</span>"
console.log("05:00")
}
function min3() {
timer = 180;
document.getElementById("time").innerHTML = "<span>03:00</span>"
console.log("03:00")
}
function min1() {
timer = 60;
document.getElementById("time").innerHTML = "<span>01:00</span>"
console.log("01:00")
}
</script>
</head>
</html>
728x90
반응형
'HTML+CSS(실습)' 카테고리의 다른 글
| ★ 2023-06-07(수) 배달의민족 주문페이지(checked) (0) | 2023.06.07 |
|---|---|
| 2023-05-31(수) 네이버 로그인 언어변경 (0) | 2023.05.31 |
| 2023-05-17(수) 헤더분리(addClass , fixed,window scroll) (0) | 2023.05.17 |
| ★2023-05-16(화) 피아노건반실습(keydown,keycode) (0) | 2023.05.16 |
| ★2023-05-03(수) 회원가입 약관동의( is(":checked") ) (0) | 2023.05.05 |