【JavaScript】テキストや画像をランダムに表示する

JavaScriptで表示内容をランダムに変える方法

Math.random&Math.floorという関数を使い、ランダムに特定のテキストや画像などを表示する方法を紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います!

目次

実装例とコード

※ページを開く または 更新(リロード)するたびに運勢が変わります。

今日の運勢は【】です!


0からnまでのランダムな整数値を生成するにはMath.floor(Math.random() * (n + 1))を使う!

  • Math.floor()は、引数に指定した数値以下の最大の整数(つまり、小数点以下を切り捨てる)を返す関数。
  • Math.random()は、0〜1未満のランダムな値を返す関数。
HTML/CSS/JavaScript コードはこちら
<p>今日の運勢は【<span id="fortune"></span>】です!</p>
<button id="custom-button">もう一度今日の運勢を占う</button>
p {
  width: 80%;
  height: 100px;
  margin: 0 auto 16px;
  background-color: #eee;
  text-align: center;
  font-size: 36px;
  line-height: 100px;
}

#fortune {
  font-weight: bold;
}

#custom-button {
  display: block;
  width: 40%;
  height: 50px;
  margin: 0 auto;
  background-color: blue;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
}

.custom-button:hover {
  opacity: .7;
}
const fortune = document.getElementById('fortune');
const fortunes = [
  '大吉',
  '中吉',
  '小吉',
  '末吉',
  '凶'
];
const btn = document.getElementById('custom-button');

fortune.textContent = fortunes[Math.floor(Math.random() * fortunes.length)];

btn.addEventListener('click', () => {
  fortune.textContent = fortunes[Math.floor(Math.random() * fortunes.length)];  
});
  • 予め表示したいメッセージ(この場合は運勢)を変数(fortunes)に配列で格納しておく。
  • 『Math.floor(Math.random() * fortunes.length』とすることで、0から「変数fortunesに格納された要素数 – 1」の整数値をランダムに生成できる。
    これをfortunesのインデックスに指定することで、要素をランダムに取得できる。

【応用例】記事や広告をランダム表示にする

予め指定した記事をランダムに表示させることも可能です。

ページを表示または更新するたびに、ランダムで記事が表示されます
【実装事例集】コピペで使えるWebコーディング(HTML/CSS/JavaScript) 多くのWebサイトやアプリで使われている『Webデザイン』や『UI』の実装例を纏めました。(随時更新中)実装方法などは別記事にコードなどを公開していますので、気にな…
ページを表示または更新するたびに、ランダムで記事が表示されます
【EC-CUBE 4】カスタマイズ方法まとめ EC-CUBE 4について、著者自身が学習・実践してきたカスタマイズ方法をまとめています。(学習状況に合わせて随時更新中) EC-CUBEとは? ネットショップの製作や管理が…
ページを表示または更新するたびに、ランダムで記事が表示されます
【超便利】iPhoneの画像サイズをワンタッチで小さくする方法(ショートカットアプリ) iPhoneで撮った写真を軽くするには? ショートカットアプリ(iOS13から標準で入っています)を使ってみよう! ショートカットアプリが入ってない方は、App Store から無…
ページを表示または更新するたびに、ランダムで記事が表示されます
【超便利】iPhoneのHEIF画像をワンタッチでJPG画像に変える方法(ショートカットアプリ) iPhoneで撮った写真の画像形式(初期設定ではHEIF)を変換するには? iPhoneの無料アプリ「ショートカット」で、JPGに一発変換できます! iOS 13から標準装備となってお…
ページを表示または更新するたびに、ランダムで記事が表示されます
【超便利】iPhoneの画像をワンタッチで合体(結合)する方法(ショートカットアプリ) iPhoneに保存した複数の写真(画像)を結合し、以下のように1つの画像として保存できます! iPhoneに保存した写真3枚を結合した例 iOS 13から標準装備となっている『シ…

同様に、オススメ商品や広告をランダムに表示させるといったこともできますね。
ランダムに何かを動かしたいときに、ぜひ使ってみてください!


当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次