JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのMath.random()で画像をランダム表示

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

Math.random()

JavaScriptのMath.random()で画像をランダム表示

JavaScriptのMath.random()で画像をランダム表示

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];

参考