エックスサーバーでWebサービスを作る（その6）デザインとJavaScriptを作る

動きの設計

• DBから取得した情報を、すべて「pタグ」で出力する。
• 「pタグ」はすべて隠しておく。
• スタートボタンが押下されたら、「pタグの1つをランダムで表示させて、今まで表示されていたものを消す」という処理を繰り返す。
• ストップボタンが押下されたら、繰り返しを中止する。

デザイン

～省略～

<div id="menuList" class="mx-auto">
  <p id="defaultText" class="h3">今日のメニューは何にしようか？</p>
  @foreach($menuList as $value)
  <p id="menu{{$loop->index}}" class="h3 mainDish"><a href="{{$value->url}}" target="_blank">{{$value->title}}</a></p>
  @endforeach
</div>
<div class="input-group mt-3 mb-1">
  <button type="button" class="btn btn-primary btn-lg px-5 mx-auto" onClick="start()">スタート</button> <br/>
</div>
<div class="input-group mt-1 mb-3">
  <button type="button" class="btn btn-danger btn-lg px-5 mx-auto" onClick="stop()">ストップ</button>
</div>

～省略～

JavaScript

var previousIndex = null;
var processId = null

//スタートボタン押下
function start() {
    menuList = document.getElementsByClassName("mainDish");
    count = menuList.length;
    //タイマーで繰り返す
    processId = setInterval(function(){
        rand = Math.floor(Math.random()*count);
        if(previousIndex === null){
            //最初の1回はデフォルトテキストを削除
            document.getElementById("defaultText").style.display="none";
        }else{
            //今まで表示されていたアイテムを削除
            menuList.item(previousIndex).style.display="none";
        }
        //新しいアイテムを表示
        menuList.item(rand).style.display="block";
        previousIndex = rand;
    },50);
}

//ストップボタン押下
function stop() {
    clearInterval(processId);
}

インデックスページ

エックスサーバーでWebサービスを作ってみた 作ったもの 今日の晩御飯のメニューをルーレットで決めるサイト メニュールーレット 作り方 h...