Notice
Recent Posts
Recent Comments
Tags more
«   2024/10   »
일 월 화 수 목 금 토
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
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[javascript] 타이머 구현 - Timer Progress Bar 진행바 형태 본문

javascript

[javascript] 타이머 구현 - Timer Progress Bar 진행바 형태

http://portfolio.wonpaper.net 2020. 3. 14. 07:56

타이머를 Progress 진행바 형태로 색깔을 넣어서 구현해 보았다.

1초단위로 타이머가 깎이면서, 진행바는 점점 짧아 진다.

 

완료후에는 완료 alert 창이 나타난다.

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript Progress Bar</title>
<style>
#myProgress {
    width:400px;
    background-color:#ddd;
}
 
#myBar {
    width:400px;
    height:30px;
    background-color:#4CAF50;
}
</style>
</head>
<body>
 
<h2>타이머 Progress 진행바 예제</h2>
 
<div id="myProgress">
    <div id="myBar"></div>
</div>
 
<div id="digit"></div>
 
<br><br>
<button onclick="start()">시작하기</button>
 
<script>
var i = 400;
function start() {
    if (i == 400)
    {
        i = 399;
        var digit = document.getElementById("digit"); 
 
        var elem = document.getElementById("myBar");
        var width = 399;
        var id = setInterval(frame,1000);
        function frame() {
            if (width <= 0) {
                clearInterval(id);
                i=400;
                digit.innerHTML = width + "초";
 
                alert("완료되었습니다.");
            } else {
                digit.innerHTML = width + "초";
 
                width--;
                elem.style.width = width + "px";
 
            }
        }
    }
}
</script>
</body>
</html>
 cs

 

'javascript' 카테고리의 다른 글

[javascript] 숫자 세자리마다 쉼표 찍기  (0) 2020.05.17
[javascript] 부모창을 새로고침 refresh 시킬때 - opener.location.reload()  (0) 2020.04.25
새로운 팝업창을 닫기전에 부모창을 refresh 새로고침 시키기  (0) 2020.02.12
핸드폰번호 숫자 자동입력 '-' 과 함께  (0) 2019.12.20
JSON.parse() json 형식의 문자열을 json 객체화하기  (0) 2019.12.16
'javascript' Related Articles more
Comments