강병호

타이머 기능 추가

Showing 1 changed file with 30 additions and 2 deletions
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <style type = "text/css"> 3 <style type = "text/css">
4 - body {margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; width : 100%; font-size: 3.0em; line-height: 3.0em; font-weight : bold; font-family: Yeon Sung; text-align:center; color:white; background-image:url(public/images/indexWallpaper.jpg); } 4 + body {margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; width : 100%; font-size: 3.0em; line-height: 3.0em; font-weight : bold; font-family: Yeon Sung; text-align:center; color:white; background-image:url(../public/images/indexWallpaper.jpg); }
5 5
6 6
7 #center_top1 {position:absolute; top:50px; left:550px; height :25%; overflow:hidden; } 7 #center_top1 {position:absolute; top:50px; left:550px; height :25%; overflow:hidden; }
...@@ -16,11 +16,12 @@ ...@@ -16,11 +16,12 @@
16 16
17 17
18 <body> 18 <body>
19 +
19 <div id = "center_top1"> 20 <div id = "center_top1">
20 (사용자정보) 님은 21 (사용자정보) 님은
21 </div> 22 </div>
22 <div id = "center_top2"> 23 <div id = "center_top2">
23 - (타이머) 뒤에 24 + <div id = "timerTxt"></div>
24 </div> 25 </div>
25 <div id = "center_top3"> 26 <div id = "center_top3">
26 (사고 요인)로 인해 사망 27 (사고 요인)로 인해 사망
...@@ -28,5 +29,32 @@ ...@@ -28,5 +29,32 @@
28 <div id = "center_top4"> 29 <div id = "center_top4">
29 합니다. 30 합니다.
30 </div> 31 </div>
32 +
33 + <script type = "text/javascript">
34 + var timerId;
35 + var timerSec = 3;
36 +
37 + window.onload = function(){
38 + timerId = setInterval('timer()', 1000);
39 + }
40 +
41 + function timer(){
42 + var min = Math.floor(timerSec / 60)
43 + var sec = timerSec % 60;
44 + var hour = Math.floor(timerSec / 3600)
45 +
46 + var msg = (hour < 10 ? "0" + hour : hour) + ":" + (min < 10 ? "0" + min : min) + ":" + (sec < 10 ? "0" + sec : sec);
47 + timerSec--;
48 +
49 + if (timerSec < 0){ // time end
50 + clearInterval(timerId);
51 + }
52 +
53 + document.getElementById("timerTxt").innerHTML = msg ;
54 +
55 + }
56 +
57 + </script>
58 +
31 </body> 59 </body>
32 </html> 60 </html>
...\ No newline at end of file ...\ No newline at end of file
......