スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

g130731_01.jpg

リロードを繰り返す度に広告が切り替わるようなスクリプトをjQueryベースで書いてみました。簡単なことにいろいろ四苦八苦したのでそれも踏まえてφ(・д・)メモメモ...。

(15.08.10) jQuery無しバージョン、複数表示バージョンの追加。レスポンスの改善。

jQueryバージョン(改善前)

HTML

<ul id="random">
  <li>Ad 1</li>
  <li>Ad 2</li>
  <li>Ad 3</li>
</ul>

CSS

#random li{
  display: none;
}

JavaScript

$(function(){
  var $p = $("#random").children(),
      c = $p.length,
      r = Math.floor(Math.random()*(c));
  $p.eq(r).css("display","block");
});

2,3行目でliの数を出し、4行目でランダム処理を行います。5行目でliの何番目かを表示します。

この時、何気なくドツボにはまってたのがeqメソッドの仕様。eqは0から数えることを理解しておらず、わざわざ4行目で+1をしていました。その結果、最後のliだけがランダムで表示されず、空白のままになってしまったというわけ。

jQueryバージョン(改善後)

HTML

<div id="random"></div>

CSS

特になし。

JavaScript

$(function(){
  var items = [
    'Ad 1',
    'Ad 2',
    'Ad 3'
  ];
  $('#random').append(items[Math.floor(Math.random() * items.length)]);
});

改善後はHTMLではなくJavaScript内にコンテンツを配置しています。HTMLに画像などを置いてしまうとロード時に全て読み込んでしまうためJavaScript内に記述したほうがレスポンスは良いです。あとちょっとだけ簡略化しています。

'Ad 1'などには'<div><img src="item1.jpg"><br>商品名</div>'のようにエレメントを置くことができます。

jQuery無しバージョン

HTML

<div id="random"></div>

CSS

特になし。

JavaScript

var items = [
  'Ad 1',
  'Ad 2',
  'Ad 3'
];
document.getElementById('random').innerHTML = items[Math.floor(Math.random() * items.length)];

こちらも上と同じ仕組みです。

jQuery複数表示バージョン

HTML

<ul id="random"></ul>

CSS

特になし。

JavaScript

$(function(){
  var items = [
    '<li>Ad 1</li>',
    '<li>Ad 2</li>',
    '<li>Ad 3</li>'
  ];
  var num = 2; /* 表示したい数 */
  for(var i=0; i<num; i++){
    var random = Math.floor(Math.random() * items.length);
    $('#random').append(items[random]);
    items.splice(random, 1);
  }
});

for文で繰り返しを行うためnumで表示したい数を設定します。流れとしては、9行目にitemsのリスト内からランダムで1つ選び、10行目で表示。11行目でそれをリスト内から削除し、残ったリストから再び抽選という感じです。

jQuery無し複数表示バージョン

HTML

<ul id="random"></ul>

CSS

特になし。

JavaScript

var items = [
    '<li>Ad 1</li>',
    '<li>Ad 2</li>',
    '<li>Ad 3</li>'
];
var num = 2; /* 表示したい数 */
for(var i=0; i<num; i++){
  var random = Math.floor(Math.random() * items.length);
  document.getElementById('random').innerHTML += items[random];
  items.splice(random, 1);
}

上と同じ仕組みです。

関連商品

関連記事

コメントを投稿する

0 コメント

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。