JavaScript로 스톱워치 만들기

5054 단어 htmlwebdevcssjavascript
타이머를 만드는 것은 매우 간단한 작업입니다. 우리는 변수, 함수 및 IT'S IT만 사용할 것입니다!

HTML 코드:

<html>
    <head>
        <title>JavaScript</title>

        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="stopwatch">
            00:00:00
        </div>

        <ul id="buttons">
            <li><button onclick="startTimer()">Start</button></li>
            <li><button onclick="stopTimer()">Stop</button></li>

            <li><button onclick="resetTimer()">Reset</button></li>
        </ul>

        <script src="main.js"></script>
    </body>
</html>


CSS 코드:

body {
    background: #202020;
    color: white;
}
button {
    width: 100px;
    height: 30px;
    border: 3px soldi white;
    border-radius: 50px;
    background: #202020;
    color: white;
    cursor: pointer;
    outline: none;
}

#stopwatch {
    font-size: 100px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -55%);
}
#buttons {
    position: absolute;
    top: 55%;
    left: 48.4%;
    transform: translate(-51.6%, -45%);
}
#buttons li {
    display: inline;
    padding-left: 10px;
}


자바스크립트 코드:

const timer = document.getElementById('stopwatch');

var hr = 0;
var min = 0;
var sec = 0;
var stoptime = true;

function startTimer() {
  if (stoptime == true) {
        stoptime = false;
        timerCycle();
    }
}
function stopTimer() {
  if (stoptime == false) {
    stoptime = true;
  }
}

function timerCycle() {
    if (stoptime == false) {
    sec = parseInt(sec);
    min = parseInt(min);
    hr = parseInt(hr);

    sec = sec + 1;

    if (sec == 60) {
      min = min + 1;
      sec = 0;
    }
    if (min == 60) {
      hr = hr + 1;
      min = 0;
      sec = 0;
    }

    if (sec < 10 || sec == 0) {
      sec = '0' + sec;
    }
    if (min < 10 || min == 0) {
      min = '0' + min;
    }
    if (hr < 10 || hr == 0) {
      hr = '0' + hr;
    }

    timer.innerHTML = hr + ':' + min + ':' + sec;

    setTimeout("timerCycle()", 1000);
  }
}

function resetTimer() {
    timer.innerHTML = '00:00:00';
}


편집하다:
주석에서 'uthx'가 지적한 것처럼 시간을 재설정할 때 sec, min 및 hr의 값을 재설정하는 기능을 추가해야 합니다. 다음 함수('uthx'로 코딩된 함수)를 사용하여 이를 수행할 수 있습니다.

function resetTimer() {
    timer.innerHTML = "00:00:00";
    stoptime = true;
    hr = 0;
    sec = 0;
    min = 0;
}


최종 결과:

(당연히 작동합니다. 직접 테스트했습니다 😉)

설명



부인 성명! 코드에서 '스톱워치'가 아닌 '타이머'라고 하는 것을 알 수 있습니다. '타이머'가 '스톱워치'보다 짧기 때문에 항상 입력할 필요가 없기 때문입니다 😂.


  • const timer = document.getElementById('stopwatch'); id를 사용하여 타이머 'div'를 변수로 가져오므로 원하는 대로 수정할 수 있습니다.
  • var hr = 0; var min = 0; var sec = 0; 시, 분, 초 변수를 만들고 초기값을 0으로 선언합니다.
  • var stoptime = true; 스톱워치가 실행 중인지 여부를 확인할 수 있도록 변수를 만듭니다.
  • if (stoptime == true) { stoptime = false; timerCycle(); } 스톱워치가 실행되고 있지 않으면 스톱워치를 켜고 timerCycle() 기능으로 이동합니다. ('시작' 버튼을 클릭한 경우에만 실행됨)
  • if (stoptime == false) { stoptime = true; } 스톱워치가 실행 중이면 끕니다. ('중지' 버튼을 클릭한 경우에만 실행됨)
  • if (stoptime == false) { 스톱워치가 켜져 있는지 확인합니다.
  • sec = parseInt(sec); min = parseInt(min); hr = parseInt(hr); 문자열을 정수로 구문 분석하는 데 사용됩니다. (문자열로 1045가 있고 정수로 사용하려는 경우 구문 분석합니다.)
  • sec = sec + 1; 초에 1을 더합니다.
  • if (sec == 60) { 초가 60이면 분 = 1이고 초는 다시 0이 됩니다.
  • if (min == 60) { 분이 60이면 시 = 1이고 초 + 분은 다시 0이 됩니다.
  • 재미있는 부분:

    • if (sec < 10 || sec == 0) {
   sec = '0' + sec;
}
if (min < 10 || min == 0) {
   min = '0' + min;
}
if (hr < 10 || hr == 0) {
   hr = '0' + hr;
}


    초, 분 및/또는 시가 10보다 작으면 앞에 0을 추가합니다. 이것이 우리가 처음부터 모든 것을 파싱해야 하는 이유입니다. 이 작업을 수행하면 문자열이 됩니다.
  • timer.innerHTML = hr + ':' + min + ':' + sec; 이 값을 '타이머' div에 추가합니다.
  • setTimeout("timerCycle()", 1000); 이렇게 하면 'timerCycle()'을 반복하기 전에 1000ms(1s)의 시간 제한이 있는지 확인합니다.
  • timer.innerHTML = '00:00:00'; 타이머를 00:00:00으로 재설정하는 데 사용됨

    • 그리고 끝났습니다!



    개발자로서 돈을 버는 방법을 알아보세요.
    viewpager에서 페이지 어댑터 사용 상세 정보
    ChangeFinder를 설치해 보았습니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage