ウェブサイトやブログで特定の内容を確率的に表示したり非表示にしたりする方法です。<scirpt>タグで操作しています。
ちなみにタイトルの複数の画像やURLとはサイト上への「バナー」の出し分けを想定しています。
方法2のforループを使う方法の方が汎用的に使えると思いますのでおすすめです。
方法1だとバナーを追加するたびにリストとif文の変更が必要ですが、方法2だとbanners変数のリスト内の変更だけで済みます。
分かりやすさだと方法1の方が単純で分かりやすいですね。
方法1 if文で実装
<!DOCTYPE html>
<html>
<head>
<title>バナーや画像の切り替え</title>
<style>
.banner {
display: none;
}
.banner.show {
display: block;
}
</style>
</head>
<body>
<!--バナー1-->
<div id="banner1" class="banner">
<img border="0" width="300" height="250" alt="" src="https:バナー1">
</div>
<!--バナー2-->
<div id="banner2" class="banner">
<img border="0" width="300" height="250" alt="" src="https:バナー2">
</div>
<!--バナー3-->
<div id="banner3" class="banner">
<img border="0" width="300" height="250" alt="" src="https:バナー3">
</div>
<script>
// バナーIDのリストを作成
var bannerIds = [
"banner1",
"banner2",
"banner3"
];
// ランダム値の作成
var randomNumber = Math.floor(Math.random() * 10);
// ランダム値に基づいてバナーの出しわけをする
if (randomNumber <= 6) {
document.getElementById("banner1").classList.add("show");
} else if (randomNumber > 6 && randomNumber <= 8) {
document.getElementById("banner2").classList.add("show");
} else {
document.getElementById("banner3").classList.add("show");
}
</script>
</body>
</html>方法2 forループで実装
<!DOCTYPE html>
<html>
<head>
<title>バナーや画像の切り替え</title>
<style>
.banner {
display: none;
}
.banner.show {
display: block;
}
</style>
</head>
<body>
<!--バナー1-->
<div id="banner1" class="banner">
<img border="0" width="300" height="250" alt="" src="https:バナー1">
</div>
<!--バナー2-->
<div id="banner2" class="banner">
<img border="0" width="300" height="250" alt="" src="https:バナー2">
</div>
<!--バナー3-->
<div id="banner3" class="banner">
<img border="0" width="300" height="250" alt="" src="https:バナー3">
</div>
<script>
// バナーリストの作成。表示確率(prob)も作成
var banners = [
{ id: "banner1", prob: 0.7 },
{ id: "banner2", prob: 0.2 },
{ id: "banner3", prob: 0.1 }
];
// ランダム値の作成
var randomNumber = Math.random();
// 設定した確率に基づいてバナーの出しわけをする
for (var i = 0; i < banners.length; i++) {
if (randomNumber < banners[i].prob) {
document.getElementById(banners[i].id).classList.add("show");
break;
}
randomNumber -= banners[i].prob;
}
</script>
</body>
</html>
