final task

3d93b28e · 소연 박 · 3d93b28e · 3d93b28e · 3d93b28e · 3d93b28e
Commit 3d93b28e authored 1 year ago by 소연 박
--- a/Stopwatch.css
+++ b/Stopwatch.css
+.main{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    width: 500px;
+    margin: 0 auto;
+}
+
+.btn_group{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.btn{
+    margin: 15px;
+    width: 100px;
+    height: 100px;
+    border: none;
+    border-radius: 100px;
+
+    font-size: 25px;
+    font-weight: bolder;
+}
+
+.start{
+    background-color: rgb(82, 225, 82);
+}
+
+.stop{
+    background-color: rgb(230, 101, 101);
+}
+
+.reset{
+    background-color: rgb(174, 174, 174);
+}
+
+.Stopwatch{
+    font-size: 100px;
+    font-weight: bolder;
+    margin-top: 100px;
+    margin-bottom: 30px;
+}
\ No newline at end of file
--- a/Stopwatch.html
+++ b/Stopwatch.html
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Stopwatch</title>
+        <link rel="stylesheet" href="Stopwatch.css"/>
+    </head>
+    <body>
+        <div class="main">
+            <p class="Stopwatch">00:00:00</p>
+            <div class="btn_group">
+                <button class="btn start" onclick="Start()">시작</button>
+                <button class="btn stop" onclick="Stop()">멈춤</button>
+                <button class="btn reset" onclick="Clear()">초기화</button>
+            </div>
+        </div>
+        <script src="./Stopwtch.js"></script>
+    </body>
+</html>
\ No newline at end of file
--- a/Stopwtch.js
+++ b/Stopwtch.js
+var time=document.getElementsByClassName("Stopwatch")[0];
+var s=0, m=0, h=0;
+var m_count=0;
+var h_count=0;
+var timer;
+
+function Start(){
+    Timer();
+    timer=setTimeout(Start,1000);
+}
+
+function Stop(){
+    clearTimeout(timer);
+}
+
+function Clear(){
+    s=0; m=0; h=0;
+    m_count=0;
+    h_count=0;
+    time.innerHTML="00:00:00";
+    clearTimeout(timer);
+}
+
+function Timer(){
+    s++;
+
+    if(s>=60){
+        s=0;
+        m_count=0;
+        m++;
+    }
+
+    if(m>=60){
+        m=0;
+        h_count=0;
+        h++;
+    }
+
+    if(s<10){
+        s='0'+ s;
+    }
+
+    if(m<10){
+        if(m_count==0){
+            m='0'+ m;
+            m_count=1;
+        }
+    }
+
+    if(h<10){
+        if(h_count==0){
+            h='0'+h;
+            h_count=1;
+        }
+    }
+
+    time.innerHTML=h+":"+m+":"+s;
+}
\ No newline at end of file
--- a/자바스크립트를 이용한 간단한 스톱워치 만들기.pptx
+++ b/자바스크립트를 이용한 간단한 스톱워치 만들기.pptx