만든 이유 및 소감
개인적으로 공부할때는 타이머를 켜놓고 공부를 하는데(공부 다 해놓고 타이머에 기록된 공부 시간을 보면 좀 뿌듯하다.)
전에 HTML, CSS를 공부할때 마침 타이머가 없기도 했고, 만들어 놓으면 닳는 것도 아니고
영원히 내가 원하는 기능을 가진 타이머를 소지 하고 있으니까, 또 하고 있는 공부에도 되고 겸사겸사로 만들게 되었다.
만들고 보니 이걸로 또 어떤 기능을 추가해서 더 발전된걸 만들 수 있을까? 라는 생각도 든다.
기능
1. 현재시간
2. 시간 측정
3. 일시정지 시간 기록
4. 시간 리셋
결과물
Study Timer.html
<!DOCTYPE html>
<html lang="en">
<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>Study Timer</title>
<style>
button {
font-size: 30px;
width: 140px;
height: 60px;
border-radius: 5px;
}
#output {
font-size: 4.0em;
text-align: center;
}
#startPause {
background-color: green;
border-color: green;
}
#reset {
background-color: gray;
border-color: gray;
}
.containerMrs {
background-color: #E6E6E6;
border-radius: 5px;
margin: auto;
margin-top: 30px;
margin-bottom: 20px;
width: 400px;
height: 200px;
}
#controls {
margin-left: 50px;
margin-top: 10px;
width: 310px;
height: 70px;
}
</style>
<script>
var time = 0;
var running = 0;
var timerid = 0;
function startPause() {
if (running == 0) {
//시작버튼
running = 1;
increment();
document.getElementById('stopTime').innerHTML="";
document.getElementById("start").innerHTML = "일시중지";
document.getElementById("startPause").style.backgroundColor = "red";
document.getElementById("startPause").style.borderColor = "red";
}
else {
//일시정시버튼
running = 0;
clearTimeout(timerid);
var date = new Date();
var nowDate = date.getDate();
var nowMonth = date.getMonth() + 1;
var hour = date.getHours();
if(hour<10){
hour = '0'+hour;
}
var min = date.getMinutes();
if(min<10){
min = '0'+min;
}
var sec = date.getSeconds();
if(sec<10){
sec = '0'+sec;
}
document.getElementById('stopTime').innerHTML= "일시정지 "+nowMonth+"/"+nowDate+" "+hour+":"+min+":"+sec;
document.getElementById("start").innerHTML = "계속";
document.getElementById("startPause").style.backgroundColor = "green";
document.getElementById("startPause").style.borderColor = "green";
}
}
//리셋
function reset() {
running = 0;
time = 0;
clearTimeout(timerid);
document.getElementById('stopTime').innerHTML="";
document.getElementById("start").innerHTML = "시작";
document.getElementById("output").innerHTML = "<b>00:00:00</b>";
document.getElementById("startPause").style.backgroundColor = "green";
document.getElementById("startPause").style.borderColor = "green";
}
//타이머 시간측정
function increment() {
if (running == 1) {
timerid = setTimeout(function () {
time++;
var hours = Math.floor(time / 3600 );
var mins = Math.floor(time % 3600 / 60 );
var secs = time % 3600 % 60;
if (hours < 10) {
hours = "0" + hours;
}
if (mins < 10) {
mins = "0" + mins;
}
if (secs < 10) {
secs = "0" + secs;
}
document.getElementById("output").innerHTML = "<b>"+hours + ":" + mins + ":" + secs+"</b>";
increment();
}, 1000)
}
}
</script>
</head>
<body>
<center>
<h1 id="clock" style="color:gray;"></h1>
</center>
<div class="containerMrs">
<p id="output"><b>00:00:00</b></p>
<div id="controls" align="center">
<button id="startPause" onclick="startPause()"><b id="start">시작</b></button>
<button onclick="reset()" id="reset"><b id="reset">리셋</b></button>
</div>
</div>
<center>
<h1 id=stopTime></h1>
<h1 id="breaktime"></h1>
</center>
<script>
var clockTarget = document.getElementById("clock");
//상단 현재 시간
function clock() {
var date = new Date();
// date Object를 받아오고
var month = date.getMonth() + 1;
// 달을 받아옵니다
var clockDate = date.getDate();
// 몇일인지 받아옵니다
var day = date.getDay();
// 요일을 받아옵니다.
var week = ['일', '월', '화', '수', '목', '금', '토'];
// 요일은 숫자형태로 리턴되기때문에 미리 배열을 만듭니다.
var hours = date.getHours();
// 시간을 받아오고
var minutes = date.getMinutes();
// 분도 받아옵니다.
var seconds = date.getSeconds();
// 초까지 받아온후
clockTarget.innerText = `${month}월 ${clockDate}일 ${week[day]}요일 ` +
`${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
// 월은 0부터 1월이기때문에 +1일을 해주고
// 시간 분 초는 한자리수이면 시계가 어색해보일까봐 10보다 작으면 앞에0을 붙혀주는 작업을 3항연산으로 했습니다.
}
function init() {
clock();
// 최초에 함수를 한번 실행시켜주고
setInterval(clock, 1000);
// setInterval이라는 함수로 매초마다 실행을 해줍니다.
// setInterval은 첫번째 파라메터는 함수이고 두번째는 시간인데 밀리초단위로 받습니다. 1000 = 1초
}
init();
</script>
</body>
</html>
+@
date.getMonth() 의 반환값은 0 ~ 11 이기 때문에 +1을 해준다.