複数のアイテムを重複せずにランダム表示する方法

ページが読み込まれる度に、ランダムに表示する仕組みは、バナー表示や、おみくじ、一言メッセージ…など、使い所は結構あるかと思われます。

1個~n個(リスト掲載個数内)のアイテムを、重複しないようにランダムに表示させるJSコード。

アイテムを表示させたい場所に『<script>item();</script>』を掲載しておけば、JSコード内に登録したリストからランダムにピックアップして表示します。

同一ページに複数掲載した場合、全てが重複しないでランダムに表示し、アイテム設定個数以上には何も表示されません。

<script>
var lists =[
'<a href="URL①">リンク①</a>',
'<a href="URL②">リンク②</a>',
'<a href="URL③">リンク③</a>',
];
function item(){
var num = Math.floor(Math.random() * lists.length);
if(lists[num] != undefined){
document.write(lists[num]);
}
lists.splice(num,1);
}
</script>

そして、表示したいHTMLに掲載します。

<script>item();</script>

Web制作覚書