More than 3 years have passed since last update.

javascript/jquery 3分カウントダウンタイマー

JavaScript

Last updated at 2020-08-18Posted at 2020-08-11

要件は
１．カウントは03:00からスタートする
２．スタートボタンを押すと1秒ずつカウントが進む
３．カウントが00:00になったら「Time UP!」と表示する
４．ストップボタンを押すとカウントが止まる
５．リセットボタンを押すとカウントが03:00に戻り、カウントが止まる

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>タイマー練習</title>
        <script>
            var to_timeup = 180;
            var max = 180;
            var intervalid;
            var start_flag = false;
           
            function count_start(){
                console.log("count_start");
               if(start_flag===false){                          
                intervalid = setInterval(count_down,1000);  
                start_flag = true;
               }
            }
            
            function count_down(){
                console.log("count_down");
                   var timer = document.getElementById("timer");  
                if(to_timeup===0){
                    timer.innerHTML = 'Time up!'
                    timer.style.color="red";      　　　　　　　　  
                    count_stop();
                }   else {
                    to_timeup--;
                    padding();
                }
            }
            
            function padding(){
                var timer=document.getElementById("timer");   
                var min = 0;
                var sec = 0;
                min = Math.floor(to_timeup/60);
                sec = (to_timeup%60);
                min = ("0"+min).slice(-2);
                sec = ("0"+sec).slice(-2);
                timer.innerHTML = min +":"+ sec;
            }
            
            function count_stop(){
                console.log(count_stop);
                clearInterval(intervalid);
                start_flag = false;
            }
            
            function count_reset(){
                console.log(count_reset);
                var timer = document.getElementById("timer");
                clearInterval(intervalid);
                start_flag = false;
                to_timeup = max; 
                padding();
                timer.style.color = "black";   
            }
            
            window.onload = function(){
                //console.log("mumei");
                padding();
                var startbutton=document.getElementById("startbutton");
                startbutton.addEventListener("click",count_start,false);
                var stopbutton=document.getElementById("stopbutton");
                stopbutton.addEventListener("click",count_stop,false);
                var resetbutton=document.getElementById("resetbutton");
                resetbutton.addEventListener("click",count_reset,false);
            }           
        </script>
    </head>
    <body>
        <h1 id="timer"></h1>
        <button id="startbutton">start</button>
        <button id="stopbutton">stop</button>
        <button id="resetbutton">reset</button>
    </body>
</html>

最初に異なる変数に同じ値を入れるのはcount resetのところで180という数字を直接書くよりも、後でカウントが５分、１０分に変更になったときに最初の変数の値を変更するだけで済ませるため。
下はjqueryを使用。しかしあまり変わらない。


<!doctype html>
<html lang="ja">
    <head>
        <meta charset='utf-8'>
        <title>タイマーjquery</title>
        <style>
            .red{
                color :red;
                font-size :20px;
            }
        </style>
        <link rel = "stylesheet" a href = "timer.css">
        <script src = "https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
        var start_flag = false;
        var intervalid;
        var to_timeup = 180;
        var backstart = 180;
        
            function count_start() {
                if (start_flag===false) {
                    intervalid = setInterval(count_down, 50);
                    start_flag = true;
                }
            }
            
            function count_down() {
                var timer = document.getElementById("timer");
                if (to_timeup===0) {
                    $('#timer').html('Time up!');  
                    $('#timer').addClass('red');
                   count_stop();
                } else {
                    to_timeup--;
                    padding();
                }
            }
            
            function count_stop() {
                clearInterval(intervalid);
                start_flag = false;
            }
            
            function count_reset() {
                var timer = document.getElementById("timer");
                to_timeup = backstart;
                padding();
                // timer.style.color="black"; 
                $('#timer').css('color','black');
                clearInterval(intervalid);
                start_flag = false;
            }
            
            function padding() {
                var min = 0;
                var sec = 0;
                var timer = document.getElementById("timer");
                min = Math.floor(to_timeup/60);
                sec = (to_timeup%60);
                min = ('0'+min).slice(-2);
                sec = ('0'+sec).slice(-2);
                timer.innerHTML = min+':'+sec;
            }
            
            $(function () {
                padding();
                $("#startbutton").click(count_start);
                $("#stopbutton").click(count_stop);
                $("#resetbutton").click(count_reset);
            })

        </script>
    </head>
    <body>
        <div class ="timerbody">
            <div id ="timer"></div>
            <div class ="buttons">
                <button id ="startbutton">start</button>
                <button id ="stopbutton">stop</button>
                <button id ="resetbutton">reset</button>
            </div>
        </div>  
    </body>
</html>

でもやっぱりjqueryはcssみたいでわかりやすくていいですね。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up