Frontend/JavaScript
카운트다운 예제
Study
2021. 3. 20. 15:14
시, 분, 초를 전부 초로 환산 후 -1초
결과값을 다시 시, 분, 초로 환산하여 출력
완료 시 Audio 기능으로 소리재생
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<!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">
<title>Document</title>
<style>
#wrapper{
width: 1000px;
height: 300px;
border: 1px solid red;
background-color: royalblue;
margin: auto;
text-align: center;
}
#wrapper input{
width: 250px;
height: 180px;
text-align: center;
font-size: 150px;
}
</style>
<script>
var timeValue=0;
var flag=true;
function auto(){
x=setInterval("countDown()", 1000);
}
function countDown(){
var a_hour= parseInt(document.getElementById("a_hour").value);
var a_min= parseInt(document.getElementById("a_min").value);
var a_sec= parseInt(document.getElementById("a_sec").value);
document.getElementById("a_hour").disabled=true;
document.getElementById("a_min").disabled=true;
document.getElementById("a_sec").disabled=true;
timeValue=a_sec+(60*a_min)+(60*60*a_hour);
timeValue--;
if(timeValue>0){
document.getElementById("a_hour").value=parseInt(timeValue/(60*60));
document.getElementById("a_min").value=parseInt(timeValue%(60*60)/60);
document.getElementById("a_sec").value=parseInt(timeValue%60);
if(timeValue<=10){
var wrapper= document.getElementById("wrapper");
(flag)? wrapper.style.backgroundColor="red":wrapper.style.backgroundColor="yellow";
flag=!flag;
}
}else if(timeValue<=0){
document.getElementById("a_hour").value=0;
document.getElementById("a_min").value=0;
document.getElementById("a_sec").value=0;
clearInterval(x);
document.getElementById("mainButton").disabled=false;
document.getElementById("a_hour").disabled=false;
document.getElementById("a_min").disabled=false;
document.getElementById("a_sec").disabled=false;
new Audio('sound/alarm.mp3').play();
document.getElementById("wrapper").style.backgroundColor="blue";
}
}
</script>
</head>
<body>
<div id="wrapper">
<input type="text" id="a_hour" value="00">시
<input type="text" id="a_min" value="00">분
<input type="text" id="a_sec" value="00">초
<p>
<button id="mainButton" onClick="auto(); this.disabled=true;">카운트카운트</button>
</div>
</body>
</html>
|
cs |
+++++ 추가
서버에서 시간을 받아와 비교하는 기능
상기 버전과 차이점은 ms단위로 서버에서 쏴주기때문에 시, 분, 초 변환식이 조금 달리진것 외엔 X
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<!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">
<title>타이머 만들기 과제</title>
<style>
body{
text-align: center;
background-color: cornflowerblue;
position: relative;
}
.wrapper{
border:3px solid #a092f2;
border-radius: 20px;
background-color: #7864ed;
width: 50%;
margin: auto;
top: 25%;
left: 25%;
position: fixed;
}
#timeblock input{
font-size: 80px;
font-weight: bold;
width: 150px;
text-align: right;
background-color: #7864ed;
border-style: none;
color: #daed64;
}
</style>
<script>
function countDown(){
var now = new Date().getTime();
var hours = document.getElementById("hour").value;
var mins = document.getElementById("min").value;
var secs = document.getElementById("sec").value;
var countDownDate=now+ (hours*1000*60*60) + (mins*1000*60)+(secs*1000);
var x = setInterval(function(){
now = new Date().getTime();
var distance = countDownDate - now;
if(distance>0){
var h = parseInt(distance/(1000*60*60));
var m = parseInt((distance%(1000*60*60))/(1000*60));
var s = parseInt((distance%(1000*60))/1000);
document.getElementById("hour").value=h;
document.getElementById("min").value=m;
document.getElementById("sec").value=s;
}else{
document.getElementById("hour").value=0;
document.getElementById("min").value=0;
document.getElementById("sec").value=0;
clearInterval(x)
alert("타임 아웃");
}
});
}
</script>
</head>
<body>
<div class="wrapper">
<h1>목표 시간까지</h1>
<p>
<div id="timeblock">
<input type="text" id="hour">시간
<input type="text" id="min">분
<input type="text" id="sec">초
</div>
<button onclick="countDown();this.disalbed=true;">버튼버튼</button>
</div>
</body>
</html>
|
cs |