Warning: Undefined array key 3 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18
Warning: Undefined array key 4 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21
Warning: Undefined array key 3 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30
Warning: Undefined array key 4 in /home/c3937730/public_html/dubdesign.net/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33
JavaScriptの Math.random() メソッドを使って画像をランダム表示させるスニペットです。
Math.random()
Math.random() は、乱数を生成して返すメソッドです。
乱数は、サイコロのように次にどのような値が出るのかわからない数字のことで、言い換えるとランダムで適当な数字のこと を指します。
かかかず
規則性がなく、予測不可能な乱数を生成するメソッドです。
Math.random()で画像をランダム表示のサンプル
画像をランダム表示するサンプルです。
「画像ランダム表示のボタン」クリックで、画像の表示エリアに登録した画像3枚の内いずれかが置き換わります。
かかかず
画像が置き換わる時同じ画像の場合もあるので、ご注意ください。
ランダム表示のコード
HTMLは、img タグに「imageArea」のidを振り記述します。これだけでOKです。
<img src="https://dubdesign.net/wp-content/uploads/2022/01/randomimg_001.jpg" id='imageArea'>JavaScriptは、まずはじめに「imageArea」のidを .getElementById で取得します。そして、ランダム生成する画像のファイルパスを関数で定義し、それをMath.random() で乱数生成を行います。
const imageArea = document.getElementById('imageArea');
const images = ['画像のパス1', '画像のパス2', '画像のパス3'];
const imageNo = Math.floor( Math.random() * images.length)
imageArea.src = images[imageNo];
