8. Stop watch

Stop watch

요구 사항
버튼을 처음 클릭하면 스톱워치가 시작하고 버튼을 다시 클릭하면 일시 정지와 시작을 반복한다.
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Stop watch</title>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

    .stop-watch {
      font-family: 'Source Code Pro', monospace;
      text-align: center;
      font-size: 3em;
      padding: 30px;
    }

    .control {
      width: 300px;
      padding: 5px;
      margin-top: 15px;
      font-size: 36px;
      font-weight: bold;
      border: 2px solid #f44336;
      border-radius: 4px;
      cursor: pointer;
      outline: none;
    }

    .control:hover {
      background: #f44336;
      color: aliceblue;
    }
  </style>
  <title>Stop watch</title>
</head>
<body>
  <div class="stop-watch">
    <div class="display">00:00:00</div>
    <button class="control">Start</button>
  </div>
  <script>

  </script>
</body>
</html>

2. Angular version

3. React version

Back to top