<body>
        <div class="display">
            <div id = "roulette" class="roulette"></div>
            <div class="c_button">
                <button id ="start">スタート</button>
                <button id ="stop">ストップ</button>
                <button id ="reset">リセット</button>
            </div>
        </div>
    </body>

.display{
    margin-top: 100px;
    margin-left:100px;
    width: 400px;
    margin:auto;
}

.roulette{
    display: block;
    width: 300px;
    height: 300px;
    margin: auto;
    position: relative;
}
.cil{
    width: 80px;
    height: 80px; 
    background-color: rgb(250, 255, 180);
    border-radius: 50%;/* 円*/
    line-height: 80px;
    text-align: center;
    display: block;
    position: absolute;
}

.c_button{
    width: 600px;
    top: 100px;
    margin: auto;
    position: relative;
}
button {
    width: 150px;
    height: 50px;
    margin: 20px;
    border: 2px solid #000;
    border-radius: 0;
    background: #fff;
    text-align: center;
}

button:hover {
　　color: #fff;
　　background: #000;
}
.red {
    background-color:#ff0062;
    width: 80px;
    height: 80px; 
    border-radius: 50%;/* 円*/
    line-height: 80px;
    text-align: center;
    display: block;
    position: absolute;
}

.pink{
    background-color:#ff73dc;
    width: 80px;
    height: 80px; 

    border-radius: 50%;/* 円*/
    line-height: 80px;
    text-align: center;
    display: block;
    position: absolute;
}
document.addEventListener("DOMContentLoaded", function(){
    //要素の表示、円周上に表示させる
    let num = [0,1,2,3,4,5,6,7,8,9];

    //HTMLから取得
    let roulette = document.getElementById("roulette");

    /*円形に並べる手順*/
    let item_length = num.length;

    //rouletteの半径を計算
    let r = roulette.clientWidth/2;

    //360度÷配置要素数
    let deg = 360.0/item_length;

    //さっきの角度をラジアンに変更
    let rad = (deg*Math.PI/180.0);
    

    //要素追加して表示させる
    for(var i = 0; i < num.length; i++ ){
        //div要素の追加
        let div = document.createElement('div');
        div.className = "cil";
        div.id = "cil"+ i;
        div.innerHTML= num[i] ;
        const x = Math.cos(rad * i) * r + r;
        const y = Math.sin(rad * i) * r + r;
        let circle = roulette.appendChild(div);
        circle.style.left = x + "px";
        circle.style.top = y + "px";
       // console.log(x);
    }    

    //ルーレットする
    let interval;//インターバル
    let first = false;//フラグ
    let number = 1;
    let grid =0; 

    function start_set(){//start状態
        document.getElementById("start").disabled = true;
        document.getElementById("stop").disabled = false;
        document.getElementById("reset").disabled = false;
        if(first === false){
            interval = setInterval(start_go,100);
            first = true;
        }         
    }

    function start_go(){//start押下
        for(var k = 0; k < item_length; k++){
            let div_number = document.getElementById('cil'+[k]);//表示上のidの取得
            div_number.classList.remove('red');//.redを消す
        }
        grid = Math.floor(Math.random()*num.length);
        number = num[grid];//.redをつけるためのランダムな数字を選択

        div_number = document.getElementById('cil'+ number);
        //console.log(div_number);
        div_number.classList.add('red');
    }
    function stop_set(){//stop押下
        document.getElementById("stop").disabled = true;
        document.getElementById("start").disabled = false;
        clearInterval(interval);
        first = false;

        let red_number = document.querySelector('.red');//.redクラスのついているものを取得
        //console.log(grid);  
        num.splice(grid,1);//配列からred_numberのところを1つ削除     
        //console.log(num);    
        red_number.classList.remove('red');
        red_number.classList.add("pink");

        if(num.length === 0){
        document.getElementById("start").disabled = true;
        }
    }

    function reset_set(){//リセット押下
        clearInterval(interval);
        first = false;
        document.getElementById("start").disabled = false;

        for(var j = 0; j < 10 ; j++){
            let all = document.getElementById("cil" + j);
            all.classList.remove('pink');
            all.classList.remove('red');
        }
       num = [0,1,2,3,4,5,6,7,8,9];
    }
        const starter = document.getElementById("start");
        const stopper = document.getElementById("stop");
        const resetter = document.getElementById("reset");

        starter.addEventListener("click",start_set,false);
        stopper.addEventListener("click",stop_set,false);
        resetter.addEventListener("click",reset_set,false);
        document.getElementById("stop").disabled = true;
        document.getElementById("reset").disabled = true;

})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.