B Memo

2014/05/27

初心者でもできる:画像や文字をランダムに表示する方法


JavaScriptを使用した画像や文字をランダムに表示する方法、簡単すぎてあちこちに使用してます。アフィリエイトのバナーとかに便利です。

どこかのサイト見て参考にさせてもらったのですが、どこで見たのかわからなくなってしまいました。。下記方法で簡単にできます。

方法

画像をランダム表示
ブラウザ更新でサンプルが変わります。(Windows:F5、Mac:Commond+R)
<script language="JavaScript">
tag=new Array();

tag[0]='<a href="URL" target="_blank" ><img src="画像" width="50" height="50" border="0" alt="犬"></a>';
tag[1]='<a href="URL" target="_blank" ><img src="画像" width="50" height="50" border="0" alt="猫"></a>';
tag[2]='<a href="URL" target="_blank" ><img src="画像" width="50" height="50" border="0" alt="鳥"></a>';

i=Math.floor(Math.random()*tag.length);
document.write(tag[i]);
</script>


文字をランダム表示
ブラウザ更新でサンプルが変わります。(Windows:F5、Mac:Commond+R)
<script language="JavaScript">
tag=new Array();

tag[0]='<strong>大吉</strong> 何を食べてもいいことあるよ';
tag[1]='<strong>吉</strong> ご飯を食べると元気になるよ';
tag[2]='<strong>凶</strong> 絶食しよう';

i=Math.floor(Math.random()*tag.length);
document.write(tag[i]);
</script>

tag[0]='■■■';の■■■の部分を変更するだけ。簡単!画像や文字は追加することができます。その際はtag[3],tag[4],tag[5]...というように、数字を1ずつ増やせばOK。

おみくじとか、どうでもいい格言とかを無駄に作りたくなります。