[낭비] [HTML] [JS] 시간이 지나간 것 같은 느낌이 안 나서 만든 거예요.

13355 단어 JavaScriptHTML

뭐 해요?


이거

(Gif라서 좀 빠르다.)

무엇 때문에?


연수용 경과시간을 보여주셨으면 좋겠습니다.
  • 무질서한 광고가 나오기를 원하지 않는다
  • 신고 불필요
  • ms 간섭
  • 특별히 확대해야 하는 구성원
  • 행사, 분위기, 회의장에 따라 색깔을 바꾸면 편리하다
    • ...30분 동안 찾았어요.
    그런데 생각해보니까 이 정도면 할 수 있을까?

    10분이면 돼요.


    그럼에도 불구하고 Code for Fun 선생은 샘플을 가지고 와서 좀 만지작거렸을 뿐이다.
    (예쁜 댓글을 남겨서 바로 고쳤어요.)
    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>経過時間表示くん</title>
    <style>
        body {
            background-color: #004666;
        }
        .container {
            /*margin-top: 100px;*/
            text-align: center;
        }
        #timerLabel {
            color: white;
            font-size: 20em;
            line-height: 0.1em;
        }
        .myButton {
            width: 180px;
            height: 50px;
            border: none;
            border-radius: 6px;
            background-color: white;
            font-size: 16px;
        }
        .title, .myButton {
            color: midnightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <p id="timerLabel">00:00</p>

        <input type="button" class="myButton" onclick="start()" value="START" id="startBtn">
        <input type="button" class="myButton" onclick="stop()" value="STOP">
        <input type="button" class="myButton" onclick="reset()" value="RESET">
    </div>
    <script>
        var status = 0; // 0:停止中 1:動作中
        var time = 0;
        var startBtn = document.getElementById("startBtn");
        var timerLabel = document.getElementById('timerLabel');

        // STARTボタン
        function start(){
            // 動作中にする
            status = 1;
            // スタートボタンを押せないようにする
            startBtn.disabled = true;

            timer();
        }

        // STOPボタン
        function stop(){
            // 停止中にする
            status = 0;
            // スタートボタンを押せるようにする
            startBtn.disabled = false;
        }

        // RESETボタン
        function reset(){
            // 停止中にする
            status = 0;
            // タイムを0に戻す
            time = 0;
            // タイマーラベルをリセット
            timerLabel.innerHTML = '00:00';
            // スタートボタンを押せるようにする
            startBtn.disabled = false;
        }

        function timer(){
            // ステータスが動作中の場合のみ実行
            if (status == 1) {
                setTimeout(function() {
                    time++;

                    // 分・秒・ミリ秒を計算
                    var min = Math.floor(time/100/60);
                    var sec = Math.floor(time/100);
                    var mSec = time % 100;

                    if (min < 10) min = "0" + min;
                    if (sec >= 60) sec = sec % 60;
                    if (sec < 10) sec = "0" + sec;

                    // タイマーラベルを更新
                    timerLabel.innerHTML = min + ":" + sec ;

                    // 再びtimer()を呼び出す
                    timer();
                }, 10);
            }
        }

        document.onkeydown = function(event) {
            if (event) {
                if (event.keyCode == 32 || event.which == 32) {
                    if(status == 1) {
                        stop();
                    } else if (status == 0) {
                        start();
                    }
                }
            }
        };
    </script>
</body>

    참고 자료


  • [비디오 샘플 코드 첨부] JavaScript로 만든 간단한 초시계.
  • 최종 샘플 코드만 사용한 것은 옳지 않다.w
    • 🔥 번들링 시간을 위한 전투: esbuild — Golang에서 작성된 JavaScript 번들러 및 축소기
    어떻게 시작

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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