人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascript初心者です。
下記のページを元にランダム表示する画面をつくっているのですが、
一度表示したものを表示させない処理がうまくできません。
http://q.hatena.ne.jp/1328329662

どなたかご教授頂けると幸いです。

●質問者: ypressjp
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● a-kuma3
●150ポイント

数字をシャッフルした配列を先に作って、その順番で画像を表示するのが、一番簡単そうかなあ、と。

<script>
/* 配列の内容をランダムに並べ替える */
function shuffle(a) {
 var len = a.length
 for (i = 0 ; i < 1000 ; ++i) {
 var i1 = Math.floor(Math.random() * len);
 var i2 = Math.floor(Math.random() * len);
 if (i1 != i2) {
 var ii = a[i2];
 a[i2] = a[i1];
 a[i1] = ii;
 }
 }
 return a
}

function print_arr(a) {
 alert(a.join(", "))
}

function sample() {
 var N = 25; // 例えば、25個
 var arr = []
 for (i = 0 ; i < N ; ++i) {
 arr[i] = i;
 }
 alert(arr.join(", ")) // 順番に並んでる

 arr = shuffle(arr); // かき混ぜる

 alert(arr.join(", ")) // バラバラになってる

 for (i = 0 ; i < N ; ++i) {
 var index = arr[i];
 ※ index を使った処理 /* ランダムに実行されてるように見える */
 }
}

</script>
<button onclick="sample()">push</button>

ypressjpさんのコメント
丁寧に注釈付きで非常に助かります。勉強中なので、どこでなにが行われているかわかると大変ありがたいです。 親切にありがとうございました!

2 ● Cherenkov
●200ポイント ベストアンサー

http://jsfiddle.net/cherenkov/EgvQk/1/

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>笑ったら罰ゲーム</title>
</head>
<body>
<script type='text/javascript'>
//javascript初心者です。 下記のページを元にランダム表示する画.. - 人力検索はてな
//http://q.hatena.ne.jp/1328764249

var photoList;
var f;

function getAlbum(res) {
 var entry = res.feed.entry;
 photoList = getPhotoList(entry);
 f = setPhoto();
 f();
}

function setPhoto() {
 var i = 0;
 var picasa = document.getElementById('picasa');
 return function() {
 if (i >= 5) {
 alert('5回を超えた');
 location.href = 'http://q.hatena.ne.jp/1328764249';
 return;
 }
 picasa.src = photoList[i++];
 };
}

function getPhotoList(entry) {
 var list = [];
 for (var i=0,n=entry.length; i<n; i++) {
 var e = entry[i];
list.push(e.content.src);
 }
 list = list.shuffle();
 return list;
}

Array.prototype.shuffle = function() {
 var i = this.length;
 while(i){
 var j = Math.floor(Math.random()*i);
 var t = this[--i];
 this[i] = this[j];
 this[j] = t;
 }
 return this;
}
</script>
<p><img src="" id="picasa"></p>
<button type="button" onclick="f()">セーフ</button>
<button type="button"><a href="out.html">アウト</a></button>
</body>
<script src="https://picasaweb.google.com/data/feed/api/user/youjirou/albumid/5705134729235124241?alt=json-in-script&callback=getAlbum"></script>
</html>

参考

ypressjpさんのコメント
度々ありがとうございます。本当にありがたいです! 記述をしっかり読み込みつつ、参考URLまでご親切につけて頂いたので、 自分で記述できるよう勉強させて頂きます。重ね重ねお礼申し上げます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ