More than 3 years have passed since last update.

javascript / jqueryを使ったルーレット

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

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>ルーレット</title>
        <link rel="stylesheet"  href="roulette.css">
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
        var intervalid;
        var MAX_BOX=16;
        
            function start_timer(){
                intervalid = setInterval(roulette_start,100);
                $("#start").prop('disabled',true);
            }
            
            function roulette_start(){
                $('.stop_color').addClass('once_stop_color');
                $('.stop_color').removeClass('stop_color');
                $('.roulette_color').removeClass('roulette_color');
                var num = $('li').not('.once_stop_color').length;
                var rand = Math.floor(Math.random() * num);  
                $('li').not('.once_stop_color').eq(rand).addClass('roulette_color');
                $('#stop').prop('disabled',false);
                $('#reset').prop('disabled',false);
            }
        
            function roulette_stop(){
                var has = $('li').not('.once_stop_color').length;
                if(has === 1){
                     clearInterval(intervalid);
                    $('#start').prop('disabled',true);
                    $('#stop').prop('disabled',true);
                    $('.roulette_color').addClass('stop_color');
                    $('.roulette_color').removeClass('roulette_color');
                }   else{
                    clearInterval(intervalid);
                    $('.roulette_color').addClass('stop_color');
                    $('.roulette_color').removeClass('roulette_color');
                    $('#start').prop('disabled',false);
                    $('#stop').prop('disabled',true);
                    $('#reset').prop('disabled',false);
                }
            }
            
            function roulette_reset(){
                clearInterval(intervalid);
                $('li').removeClass(); 
                $("#start").prop('disabled',false);
                $('#stop').prop('disabled',false);
                $('#reset').prop('disabled',false);;
            }
            
            function make_box(){
                for(var i = 1; i <= MAX_BOX; i++){
                    $('#roulette2').append('<li>'+ i + '</li>');
                    // $('#roulette2').append(`<li id="box_${i}">${i}</li>`);
                }
            }
            
            $(function(){
                make_box();
                $('#start').click(start_timer);
                $('#stop').click(roulette_stop);
                $('#reset').click(roulette_reset);
            })
            
            
        </script>
    </head>
    <body>
        
        <ul id='roulette2'>
        </ul>
        
        <div id="buttons">
            <button id="start">start</button>
            <button id="stop">stop</button>
            <button id="reset">reset</button>
        </div>
    </body>
</html>

addclassやremoveclassを便利に使う。


ul{
    border :solid 1px black;
    list-style :none;
    width: 328px;
    display :flex;
    flex-wrap :wrap;
    padding:0;
    margin :20px auto;
}

li{
    border :solid 1px black;
    /* margin :0; */
    /* padding :10px 30px; */
    width: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 20px;
}

.roulette_color{
     background-color :orange;
}

.stop_color{
    background-color :red;
}

.once_stop_color{
    background-color :#ffcccc;
}

#buttons{
    text-align :center;
}

button{
    padding :5px 20px;
    margin :0 20px;
    font-size :15px;
}

body{
    border :solid 1px black;
    padding: 10px 20px;
    width: 400px;
    margin: 0 auto;
    box-shadow: 4px  4px 3px grey;
}

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