ルーレット形式で文字が変わる実装を作りたいです

Question

前提・実現したいこと

ルーレット形式で文字が変わる実装を作りたいです
１１１１の部分がスタートを押したら用意していた文字にランダムで動いて
ストップで止めることができる仕様にしたいです。

該当のソースコード

ソース <div class="left-bar-header">
</div>

<div class="rooms">

 <div id="roulette">
    <p id="isPlace">11111</p>
  </div>

  <div class="buttons">
    <button id="start" onClick="clickedStart()">start</button>
    <button id="stop" onClick="clickedStop()">stop</button>
  </div>

</div>
   

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

あと「ここから先は作ってください」という作業依頼になってませんか？
何一つ書けないのでしたらそのままのコードをもらったとして自分の身にはなりません。

[firegrape]

スロットみたいにしたいってことですか？

Answer 1

どうぞ

サンプル

const 用意していた文字 = ["用意していた文字1","用意していた文字2"];
let timer;

var clickedStart = ()=> timer = setInterval(
  ()=> isPlace.textContent = 用意していた文字[ Math.floor( Math.random() * 用意していた文字.length ) ],
  100
);

var clickedStop= ()=> clearInterval( timer );

Comments

[m.ts10806]

いいサンプルですね。

[Lhankor_Mhy]

ありがとうございます。わかっていただけてうれしいです。

なるべく少ないコードで必要な要素を盛り込む方針で書きました。
CSS transform でリール回転を再現しようと思ったのですが、シンプルさを損ないそうだったので見送りました。