「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;
}- ボタンをクリックできることが直感的にわかるよう、ボタンにカーソルを持っていくとポインターに変わってボタン全体が半透明になるCSS。
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のインデックスに指定することで、要素をランダムに取得できる。
応用例
予め指定した記事をランダムに表示させることも可能です。（具体的なコードはページのソースを見てください！）
ページを表示または更新するたびに記事が変わります！
【2022年最新版】SDGs関連グッズ総まとめ
本記事ではSDGs（エス・ディー・ジーズ）に関連した商品をピックアップ！ 天然素材やリサイクル素材といった地球環境に優しいものから、オーガニックコットンやフェアト…
ページを表示または更新するたびに記事が変わります！
【2022年最新版】衛生関連グッズ総まとめ
マスクや除菌スプレー、抗菌加工グッズなど、最新の感染症対策用品をピックアップしました。 新型コロナウイルス対策はもちろん、普段の衛生管理にも役立てるはず！除菌…
ページを表示または更新するたびに記事が変わります！
【2022年最新版】防災関連グッズ総まとめ
突然の災害など、もしもの非常事態に備えておきたい防災関連グッズを紹介します！ライトや防寒具、簡易トイレなどの個別商品から持出袋に入ったセットアイテムまで、幅…
ページを表示または更新するたびに記事が変わります！
【2022年最新版】あったかグッズ総まとめ
秋冬ノベルティの中でも根強い人気のあるブランケットを中心に、最新のあったかグッズを纏めました。特に女性に人気の商品が多く、秋冬に行われるレディース向けのイベ…
ページを表示または更新するたびに記事が変わります！
【2022年最新版】和風グッズ総まとめ
扇子や和食器などの日本ならではグッズから、日本を感じる和柄デザインのグッズ、日本が誇る食料品を中心にピックアップ！ お祭りや花火大会、神社・お寺への参拝などの…
同様に、オススメ商品をランダムに表示させるといったこともできますね。
ランダムに何かを動かしたいときに、ぜひ使ってみてください！