본문 바로가기
Front end/JavaScript

다중 타이머 만들기 (Java Script)

by re-hwi 2023. 2. 3.

컴활 준비를 끝내고 다시 자바스크립트를 공부하며 내가 객체지향을 아직도 잘 사용하지 못한다는 것을 알았다. 그래서 자바스크립트의 기초는 어느정도 알고 있으니 간단한 프로그램을 최대한 많이 만들며 언어에 익숙해지려 한다.

 

 며칠 전 "피지컬 100" 이라는 프로그램을 보던 중 참가자들이 공중에 매달리며 버티는 장면이 나왔다. 이 때 가장 오래 버틴 사람이 승자가 되는 그런 게임이였는데 그 장면을 보며 참가자들의 기록을 쉽게 잴 수 있는 다중 타이머를 만들면 좋겠다고 생각했다. 

 

생각보다 알고리즘은 굉장히 쉬웠지만 언어에 익숙하지 않다보니 시간이 조금 걸렸던 것 같다.

Algoritm

알고리즘은 하나의 타이머가 흘러가고 해당 인원의 버튼을 누르면 타이머의 시간을 참조해서 시간을 기록하는 형태이다. 

또한 타이머는 start 버튼을 눌러야 시작되고 stop 버튼을 누르면 중지된다. 

code

Html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    *{
  margin: 0;
  padding: 0;
  border: none;
}

input[type = "button"]{
  display: inline-block;
  width: 10vw;
  height: 5vW;
  margin: 11.5%;
  margin-top: 5%;
  margin-bottom: 0;
  border-radius: 10px;
  font-size: larger;
  font-weight: bold;
}

input[type = "button"]:active{
  background-color: #4A4A4A;
}

input[type = "button"]:hover{
  background-color: #ccc;
}

#start{
  display: inline-block;
  margin-left: 45%;
  margin-top: 20px;
}

h1{
  font-size: 50px;
  margin-left: 80%;
  margin-top: -5%;
  margin-bottom: 5%;
}

h2{
  display: inline-block;
  width: 14vw;
  margin: 9.45%;
  text-align: center;
  margin-top: 2%;
}

#plus, #minus{
  width: 3vw;
  height: 3vw;
  font-size: 40px;
  border-radius: 50%;
  margin-left: 0%;
}

#plus{
  margin-right: 0;
  margin-left: 15%;
}


  </style>
</head>
<body>

  <input id = "start" type = "button" value="Start" onclick="timer_start()">
  <input id = "stop" type = "button" value="stop" onclick = "stop()">



  <h1 id = timer>00:00:00</h1>

  <input type="button" value="인원 A" onclick="label_1()">
  <input type="button" value="인원 B" onclick="label_2()">
  <input type="button" value="인원 C" onclick="label_3()">

  <h2 id = "timer_1">NONE</h2>
  <h2 id = "timer_2">NONE</h2>
  <h2 id = "timer_3">NONE</h2>

  <input type="button" value="인원 D"onclick="label_4()">
  <input type="button" value="인원 E"onclick="label_5()">
  <input type="button" value="인원 F"onclick="label_6()">

  <h2 id = "timer_4">NONE</h2>
  <h2 id = "timer_5">NONE</h2>
  <h2 id = "timer_6">NONE</h2>

<script>
  let time = 1;
  const stopwatch = document.getElementById("timer");
  const text_1 = document.getElementById("timer_1")
  const text_2 = document.getElementById("timer_2")
  const text_3 = document.getElementById("timer_3")
  const text_4 = document.getElementById("timer_4")
  const text_5 = document.getElementById("timer_5")
  const text_6 = document.getElementById("timer_6")

  let hh;
  let mm;
  let ss;

  function timer() {

  let sec = time;
  let min = 0;
  let hour = 0;
  let minute = 0;

  time ++;

  if (time >= 60){
    sec = (time % 60)
    min = parseInt(time / 60)
  }

  if (min >= 60){
    min = (min % 60)
    hour = parseInt(time / 3600)
  }

  var inner = (String(hour).padStart(2,'0') + ":" + String(min).padStart(2,'0') + ":" + String(sec).padStart(2,'0'))

  stopwatch.innerText = inner;
  hh = String(hour).padStart(2,'0')
  mm = String(min).padStart(2,'0')
  ss =  String(sec).padStart(2,'0')
}

let interId;

function timer_start(){
  interId = setInterval(timer, 1000);
}

function stop(){
  clearInterval(interId)
}

function label_1(){
  let hour_1 = hh
  let min_1 = mm
  let sec_1 = ss

  t1 = hour_1 + ":" + min_1 + ":" + sec_1;
  text_1.innerText = t1;
}

function label_2(){
  let hour_2 = hh
  let min_2 = mm
  let sec_2 = ss

  text_2.innerText =  hour_2 + ":" + min_2 + ":" + sec_2;
}

function label_3(){
  let hour_3 = hh
  let min_3 = mm
  let sec_3 = ss

  text_3.innerText =  hour_3 + ":" + min_3 + ":" + sec_3;
}

function label_4(){
  let hour_4 = hh
  let min_4 = mm
  let sec_4 = ss

  text_4.innerText =  hour_4 + ":" + min_4 + ":" + sec_4;
}

function label_5(){
  let hour_5 = hh
  let min_5 = mm
  let sec_5 = ss

  text_5.innerText =  hour_5 + ":" + min_5 + ":" + sec_5;
}

function label_6(){
  let hour_6 = hh
  let min_6 = mm
  let sec_6 = ss

  text_6.innerText =  hour_6 + ":" + min_6 + ":" + sec_6;
}

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

00:00:00

NONE

NONE

NONE

NONE

NONE

NONE

일단 프로젝트의 완성도보다는 자바스크립트에 익숙해지는 것에 중점을 두었기 때문에 디자인을 구성하지 않았다. 나중에 실력이 늘고 나서 제대로 된 프로젝트를 할 때에나 디자인에 신경 쓸 예정이다 ㅎㅎ

반응형
저작자표시

'Front end > JavaScript' 카테고리의 다른 글

(JavaScipt) OpenWeatherAPI 사용법  (0) 2023.03.17
(Java Scipt) 아날로그 시계 만들기  (0) 2023.03.13
카운트다운 계산기(JavaScript)  (0) 2023.03.01
JavaScript를 이용하여 동적 테이블 만들기 (1)  (0) 2023.02.27
JavaScript 시작  (0) 2023.01.04

관련글

댓글

티스토리툴바