スポンサーサイト

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

四つ葉日記を再現してみた( ゚∀゚)o彡゜(ソース公開)

四つ葉さんのところにいくと
四つ葉プロフィール

こんな感じの画像が出ますよね
ご存知の通り、ランダムに選択されたものです。


今回はこれを再現してみました!

このランダムスクリプトの解説もいれるので
少しでも興味をもたれたら、読んでください( ゚∀゚)o彡゜



画像はフリーサイトからいただきました。


どうでしょう!
更新すると画像が変わると思います!

多分完全に再現できてると・・・Oh!Yeah!!


ちなみに、画像以外にも少し違います。

画像数
拡張子
四つ葉さん
1903個
png
ここ
1202個
ico



ここからスクリプトの解説です。

まずソースを見てみましょう。
A






B









1
2
3
4
5
6
7

8
9
10
11
12
13
14
15
16
17
<script type="text/javascript"> var Random = new Array(); // 配列を作成 var Url = new Array(); // 配列を作成 var ImageMax = 1202; // Itemの個数 var DisplayMax = 12; // 最大表示数(好みで変更可) var LineMax = 4; // 1行の最大表示数(好みで変更可) var i; // 変数を用意 for(i=0;i<DisplayMax;i++){ Random[i] = Math.floor(Math.random() * ImageMax); Url[i] = "http://dl.dropbox.com/u/53511407/etc/icon/" + Random[i] + ".ico"; document.write('<img src=',Url[i],' border="0">'); if((i+1)%LineMax==0 && i!=0){ document.write('<br>'); } } </script>



それでは、番号ごとに説明していきます。

・1~16
1
2~15
16
<script type="text/javascript">
ソース
</script>
このタグで囲むと、javaスクリプトとして読み込まれます。
「type="text/css"」などもあります。

・2~7(A)
2
3
4
5
6
7
var Random = new Array(); // 配列を作成
var Url = new Array(); // 配列を作成
var ImageMax = 1202; // Itemの個数
var DisplayMax = 12; // 最大表示数(好みで変更可)
var LineMax = 4; // 1行の最大表示数(好みで変更可)
var i; // 変数を用意
コメントアウトでも書いてますが、やっていることは
 ・2,3 配列(文字列を入れる連結した箱)を2種類用意。
 ・4,5,6 変数3つを用意し、それぞれの数を設定する。
 ・7 変数を1つ用意(まだ数を持ちません)。
です。

・9~15(B)
9
10
11
12
13
14
15
for(i=0;i<DisplayMax;i++){
Random[i] = Math.floor(Math.random() * ImageMax);
Url[i] = "http://dl.dropbox.com/u/53511407/etc/icon/"
+ Random[i] + ".ico";
document.write('<img src=',Url[i],' border="0">');
if((i+1)%LineMax==0 && i!=0){ document.write('<br>'); }
}
 ・9,15
  これはfor文というものです。ここでの意味は
  まずiに0を代入し、1ずつ増やしていきながら、iがDisplayMaxになるまで、
  囲まれたソース(10~14)を実行する。
  となります。

 ・10~13
  ・10 Random[i] = Math.floor(Math.random() * ImageMax);
    Randomという配列の「i番の箱」にランダムに発生させた数字をいれます。
     「Math.random()」は0~1未満(0.9999...)の数字を、ランダムに発生させます。
     「Math.floor」は少数点以下を切り捨てます。
     つまり「0~1未満の数字×画像数」の小数点以下を切り捨てし、配列にいれます。

  ・11,12 Url[i] = "http://dl.dropbox.com/u/53511407/etc/icon/"
               + Random[i] + ".ico";
    Urlという配列の「i番の箱」に「http://.../icon/数字.ico」を入れます。
    ここでの「数字」は、Random配列の「i番の箱」に入っているものです。

  ・13 document.write('<img src=',Url[i],' border="0">');
    「document.write('あいうえお');」をうつと、「あいうえお」が表示されます。
     また、「document.write('あい',変数,'うえお');」をうつと、
    変数が0の場合、「あい0うえお」が表示されます。

    ここではUrl配列の「i番目の箱」にあるURLから、画像を表示させています。

  ・14 if((i+1)%LineMax==0 && i!=0){ document.write('<br>'); }
    これはif文というものです。ここでの意味は
    「(i+1)を、Linemaxで割った余りがoであるとき」、かつ「iが0でないとき」に
    囲まれたソースを実行する。

    です。
    つまり、LineMax個ごとに改行させます。




こんな感じです。
結構短いソースで再現できるんですね( ゚∀゚)o彡゜


ちなみに10~13を1行で書くとすると、
document.write('<img src=http://dl.dropbox.com/u/53511407/etc/icon/',Math.floor(Math.random() * ImageMax),'.ico border="0">');

自動改行されてますが、きちんと1行に収まってますね(゜∀゚()



また、ここで四つ葉さんのソースを見たんですが、
あまりfor文を使われてないようで。。。

プログラムは性格がでますね(ノ゚ο゚)ノ


四つ葉さんのソースは、すごくわかりやすくて
ここのよりも解説向きのように感じまじた。


比較とかはあまり好きじゃないので、
四つ葉さんのソースは載せません。







とりあえず

楽しかった!!



読者の皆さんにも、楽しんでいただけたなら嬉しいです( ゚∀゚)o彡゜






じゃあのOh!Yeah!!

スポンサーサイト

コメント

サクラサケ

な、なるほど・・・・・・わからんっ (,,゚Д゚)

ナンテネ・・・ってことで、


<div class="plugin-freearea" &align>
&freearea
</div>
<script language="JavaScript">
var images = new Array();

images[0] = "http://blog-imgs-48.fc2.com/h/i/g/higatakuwagata/20111007013944cfa.jpg"; /* あんどぅさん */
images[1] = "http://blog-imgs-48.fc2.com/h/i/g/higatakuwagata/201110070139440b6.jpg"; /* ペンタさん */

【中略】

images[23] = "http://blog-imgs-35.fc2.com/h/i/g/higatakuwagata/20120131022620c77.jpg"; /* ピンジンちゅんちゅん */

var rnd = Math.floor((Math.random() * 100)) % images.length;
document.write('<img src=',images[rnd],' border="0">');
</script>


ウチのランダムコメントです。

プログラムは拾ってきたものですが、後から簡単に画像入れれるように1個1個追加できるようにしています。

FC2だと画像UPが簡単で、しかも整理しやすいのでこのやり方結構楽かもw

まあでも、画像数1000個もなったら大変ですけどwwwwww (っていうか無理w)


ホントプログラム個人差出ますよね~~。


くさー

Σ(゚∀゚ノ)ノキャーハズカシス
実は自分もベースはその辺で拾ったソースなんですけどねwww

ここのソースがさっぱりしてて変数上手く利用してるし上手いソースだなと思います!!

こぅ >サケさん

四つ葉さんのソースも、画像表示はそれに近いものでした
画像選択はさすがにfor文でしたが・・
画像が少ない場合は、たしかにそっちが編集しやすいですねw
参考にします( ゚∀゚)o彡゜

ちなみに、【中略】の少しあと
 var rnd = Math.floor((Math.random() * 100)) % images.length;
と書かれてますが、カッコが多いです(゜∀゚()
プログラムの出力には影響ありませんが
 var rnd = Math.floor(Math.random() * 100) % images.length;
が綺麗ですね。



あと、別の表記方法として
 var rnd = Math.floor(Math.random() * images.length);
があります。
ほとんど意味は同じですが、こっちは全ての画像において確率が一定です。
 前者の意味:「0」から「99」を「images.length」で割って、その余りをrndに代入。
 後者の意味:「0」から「images.length-1」をrndに代入。

例えば、「images.length」が90の場合、
 前者の例:「0~9」が「10~89」と比べて2倍出やすい。
 後者の例:全て一定。
のようになります。

こぅ >くさーさん

ありがとうございmすww
ちょっと自分のやつ、変数多すぎなきがしますが・・・w

アイテムデータまじやばいっす( ゚∀゚)o彡゜

ヒガタク

forループで頭がばぐってプログラミング投げ出した俺がきましたよっと

こぅ >ひがっち

ばぐるの早えよww
分木配列とかなるとマジで意味わかんないからwww
お互い大学がんばろうぜ( ゚∀゚)o彡゜

コメントの投稿

今日のこぅくん
テニスと映画とプログラムが好きです
頑張るぞー( ゚∀゚)o彡゜
リンク先の更新!
プロフィール

こぅです(゜∀゚()
REDSTONEの青鯖にいます。
ギルドラオス共和国に所属。

引退してます。

九州住みの大学生です(  ̄^ ̄)ゝ

・Twitter: koukunRS
・Skype: yamadashi_skype
・Discord: kou#9204
・Gmail: koukun0120@...



赤石( ゚∀゚)o彡゜
リンク
いつもより余計に回っております


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