<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Stop watch</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
.stop-watch {
font-family: 'Source Code Pro', monospace;
text-align: center;
font-size: 3em;
padding: 30px;
}
.control {
width: 300px;
padding: 5px;
margin-top: 15px;
font-size: 36px;
font-weight: bold;
border: 2px solid #f44336;
border-radius: 4px;
cursor: pointer;
outline: none;
}
.control:hover {
background: #f44336;
color: aliceblue;
}
</style>
<title>Stop watch</title>
</head>
<body>
<div class="stop-watch">
<div class="display">00:00:00</div>
<button class="control">Start</button>
</div>
<script>
// 버튼을 누르면, control이 호버되고, innerHTML로 stop이 된다
// 처음 눌렀을때 셋인터벌함수로 1씩 증가되는걸 출력
// 60이 넘으면 1이 증가
// 다시누르면 control호버 제거, innerHTML Start
// 셋인터벌 함수 중지?
// 상태를 갖고 있어야 한다(true,false)
const $control = document.querySelector('.control');
const $display = document.querySelector('.display');
let state = true;
let m = 0;
let s = 0;
let ms = 0;
let timerId = null;
function stopwatch() {
ms = ms + 1;
if(ms===100){
ms = 0;
s += 1;
}
if(s===60){
s = 0;
m= m+1;
}
const ch0 = '0' + m;
const ch1 = '0' + s;
const ch2 = '0' + ms;
$display.textContent = ch0.slice(-2) + ":" + ch1.slice(-2) + ":" + ch2.slice(-2);
}
function StartClock() {
sss();
timerId = setInterval(stopwatch, 10);
}
function StopClock() {
if (timerId != null) {
clearInterval(timerId);
}
}
$control.addEventListener('click', function (e) {
if (state) {
$control.innerHTML = 'stop';
state = false;
StartClock();
}
else {
$control.innerHTML = 'Start';
state = true;
StopClock();
}
});
</script>
</body>
</html>반응형
'공부 > TIL-D' 카테고리의 다른 글
| deg, clientX, clientY (0) | 2019.05.28 |
|---|---|
| analog, dital watch (0) | 2019.05.27 |
| counter (0) | 2019.05.25 |
| toggle (0) | 2019.05.23 |
| todo v2 (0) | 2019.05.21 |