JavaScript로 타이머 응용 프로그램 만들기

19701 단어 JavaScripttech
JavaScript를 사용하여 간단한 타이머 응용 프로그램을 만들었습니다.나는 그때 고민했던 일, 안 풀렸던 일을 회상하면서 썼다.

1. 타이머 프로그램의 외관


Start 및 Stop 버튼 및 타이머만 간단하게 표시됩니다.
또한 버튼은 Bootstrap을 사용하여 수행됩니다.

위의 그림은 실제 제작된 타이머 프로그램입니다.

2. 설치할 기능


타이머를 만들 때 어떤 기능을 설치할지 결정한다.
  • Start 버튼과 Stop 버튼 두 개를 준비합니다.초기 상태에서는 Stop 버튼을 누를 수 없습니다.
  • Start 버튼을 누르면 타이머가 시작되고 0부터 카운트됩니다.
  • Start 버튼을 누를 때 Start 버튼이 무효화되어 Stop 버튼이 유효합니다.
    ４. Stop 버튼을 누르면 타이머가 멈춘다.
  • Stop 버튼을 누르면 Stop 버튼이 무효가 되고 Start 버튼만 누릅니다.
  • 타이머가 멈춘 후 Start 버튼을 눌러 타이머를 0부터 위로 재설정합니다.
  • 타이머 부분의 디스플레이는 hh:mm: 입니다.

    • 3. 타이머 응용 디자인


    상술한 기능을 실시할 때 어떻게 해야만 실현할 수 있는지를 구체적으로 고려하였다.
  • .disabled를 사용하면 단추를 무효화할 수 있을 것 같습니다.
  • addeventListner("click", 중략)를 사용하여 Start 단추를 누르면 계수를 시작할 수 있습니다.반복 동작 setInterval()을 사용하는 경우 카운트 부를 사용할 수 있습니다.
    • addeventListner(약칭).disabled를 조합하여 Start 버튼을 누르면 Start 버튼이 비활성화되고 Stop 버튼이 유효해집니다.
  • clearInterval을 사용하면 setInterval ()의 중복 동작을 멈출 수 있을 것 같습니다.
  • 3.나는 같은 요령에 따라 실시할 수 있다고 생각한다.
  • 그때는 아무 생각도 못했어요.결과적으로clearInterval에서 반복 작업을 중지할 때 재설정됩니다.
  • 수치가 1위일 때는 10위에 0을 더하기를 바란다.if(value < 10){value = "0"+ n;}실현할 수 있다.

    • 4. 해를 넘기는 기능의 디자인


    처음에는 반복 동작이었는데 1000ms에 1을 더하면 타이머가 된다고 생각해서 실제로 그걸 했어요.그러나 조사 과정에서 타이머가 Date 대상을 사용하는 것을 발견했기 때문에 먼저 Date 대상을 조사했다.
    Date 객체에 대한 세부내용(Mozill/MDN 웹 Docs 기준)
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date
    Date.now () Start 단추를 눌렀을 때의 현재 시간을 가져오고 setInterval () 의 반복 동작을 사용한 현재 시간에서 Start 단추를 눌렀을 때를 빼면 시간이 걸릴 것 같아서 이 방법으로 하기로 결정했습니다.

    5. 실제 코드와 간단한 설명


    걸려 넘어진 곳은 평론으로 간단한 해설을 썼다.
    html
    <!DOCTYPE html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <header>
        </header>
        <article>
            <div class="container-fluid">
                <p class="def_timer">00:00:00</p>
                    <button type="button" class="btn btn-primary">Start</button>
                    <!--classは複数指定できる。上の場合btnとbtn-primary-->                
                    <button type="button" class="btn btn-danger">Stop</button>
            </div>
            <script src="main2.js"></script>
        </article>
    </body>
</html>
    css
    .container-fluid{
    text-align: center;
}
    javascript
    let start_button = document.querySelector('.btn-primary');
let stop_button = document.querySelector('.btn-danger');
let def_timer = document.querySelector('.def_timer');
let start_time;
let el_time;
let timer_id;

stop_button.disabled = true;
//Stopボタンを無効化する

start_button.addEventListener('click',()=>{
    //timer_buttonをクリックしたときは以下の挙動をする
    start_time = Date.now();
    //ボタンを押したときの現在時刻を取得
    start_button.disabled = true;
    stop_button.disabled = false;
    timer_id = setInterval(go_timer,10);
    })

stop_button.addEventListener('click',()=>{
    start_button.disabled = false;
    stop_button.disabled = true;
    clearInterval(timer_id);
})

function add_zero(value){
    if(value < 10){
        value = "0" + value;
    }
        return value;
}
//1桁のときに10の位に文字列の"0"を足す関数

function arrange_time(){
    let sec = Math.floor(el_time % 60000 / 1000);
    //商の余りを使うことで60を超えたら自動的に0になる
    let min = Math.floor(el_time % 3600000 / 60000);
    let hour = Math.floor(el_time / 3600000);

    sec = add_zero(sec);
    //上で作ったadd_zeroのvalueにsecを入れたものをsecに入れた
    min = add_zero(min);
    hour = add_zero(hour);

    def_timer.innerHTML = `${hour}:${min}:${sec}`;
    //html内にあるdef_timerを書き換える
}

let go_timer = ()=>{
    let time_now = Date.now();
    el_time = time_now - start_time;
    arrange_time();
}

    6. 요약


    이렇게 간단하지만 타이머 응용은 이미 완성되었다.나는 그 프로그램에 장과 일시 정지 기능을 추가하고 싶다.
    JavaScript를 처음 사용해 앱을 제작한 것이어서 헤아릴 수 없이 많은 지경에 이르렀지만, 앱 제작의 조립 방법과 MDN이 얼마나 알아볼 수 있는지 등은 좋은 경험이었다.
    이런 기사는 처음 만들어봐서 안 되는 부분이 있을 거라고 생각했는데 기사를 써서 복습했다.
    뭔가 더 만들었을 때 이런 출력 기사를 썼으면 좋겠다.
    🔥 HTML, CSS, JS만 사용하여 전자상거래 사이트를 만드는 방법
    UEFI 실전-DEBUG

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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