itsme

모각코 7일차 - 한 입 웹개발 (JS) 8월 과정 본문

대외활동/모각코 - 온라인 대외활동

모각코 7일차 - 한 입 웹개발 (JS) 8월 과정

itssmeee 2021. 8. 17. 21:45
반응형

15, 16일은 공휴일이어서 푹 쉬다가 왔다.

 

7일 차에서는 조건문과 반복문에 대해서 알아봤다.

 

조건문과 반복문은 java에서 사용하는 거처럼 비슷하게 사용하면 되는 거 같았다.

 

조건문에는 if~else, switch문이 있다.

 

반복문에는 while, do/while. for문이 있다.

 

오늘의 과제는 간단하게 스톱워치를 만들어 보는것이다.

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>7days</title>
  <style>
    #stopwatch{
      text-align: center;
      font-family: 'Do Hyeon', sans-serif;
      font-size: 40px;
    }
    #buttons{
      text-align: center;
    }
  </style>
</head>

<body>
  <script>
    var time = 0;
    var running = 0;

    function start() {
        running = 1;
        up();
    }

    function stop() {
        running = 0;
    }

    function reset() {
      running=0;
      time=0;
      document.getElementById("stopwatch").innerHTML = "00:00:00"
    }

    function up() {
      if(running ==1 ){
        setTimeout(function () {
          time++;

          var min = Math.floor(time/100/60);
          var sec = Math.floor(time/100%60);
          var ms=time%100;
          
          if (min<10){
             min= "0" + min;
          }
          if(sec<10){
              sec = "0" + sec;
          }
          document.getElementById("stopwatch").innerHTML = min+":"+sec+":"+ms;
          up();
        },10)
      }
    }
  </script>
  <div id ="stopwatch">
    00:00:00
  </div>
  <div id="buttons">
    <button type="button" id="start" onclick="start()">시작</button>
    <button type="button" id="stop" onclick="stop()">멈춤</button>
    <button type="button" id="reset" onclick="reset()">초기화</button>
  </div>
</body>
</html>

스톱워치는 구현해본 적이 없어서 꽤 걸렸다...

'대외활동 > 모각코 - 온라인 대외활동' 카테고리의 다른 글

모각코 9일차 - 한 입 웹개발 (JS) 8월과정  (0) 2021.10.27
모각코 8일차 - 한 입 웹개발 (JS) 8월과정  (0) 2021.10.27
모각코 6일차 - 한 입 웹개발(JS) 8월 과정  (0) 2021.08.14
모각코 5일차 - 한 입 웹개발(JS) 8월 과정  (0) 2021.08.14
모각코 4일차 - 한 입 웹개발 (JS) 8월과정  (0) 2021.08.12
'대외활동/모각코 - 온라인 대외활동' Related Articles more