javascript ランダムに動くhtml要素を作る

javascript ランダムに動くhtml要素を作る

javascriptで、Math.randomを使用して、ランダムに動くhtml要素を作るサンプルコードを記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

Math.random使い方

Math.randomは、0~1範囲の浮動小数点の擬似乱数を返してくれます。

これを利用して、要素のポジションの%を変更していきます。

サンプルコード

以下は、
「実行」ボタンをクリックすると、丸い要素がランダムにポジションを変えて出力される
サンプルコードとなります。

※cssには「bootstrap5」を使用してます。「bootstrap5」は、IEのサポートを終了してます。

要素がランダムに作成されていることが確認できます。