fc2ブログ

JavaScriptっぽい。

『JavaScriptっぽい。』の更新情報やJavaScriptに関する日記。

クリックすると変化する画像(読み込む度に順番も変化)

自分のバンドのサイトを作るのに、久しぶりにコードを書いてみました。

イベントハンドラにメソッドを設定すると、 this が new したオブジェクトではなくて、イベントの発生元に変わってしまうので、グローバル変数 job にいったん this を退避させているんですけど、もっとスマートな方法ってないんでしょうかね? addEventListener を使っても一緒だし…。


<script type="text/javascript"><!--
var num_ary = [0,1,2,3];
var job;
function Random_img(ary,tgt){
	this.ary = ary;
	this.length = ary.length;
	this.tgt = tgt;
	this.shuffled_array = [];
	this.obj = null;
	this.count = 0;	
}
Random_img.prototype = {
	lord_img : function(){
		for ( var i = 0 , i_max = this.length ; i < i_max ; i++ ){ 
			( new Image() ).src = "live/" + this.ary[i] + ".jpg";
		}
	},
	random_img : function(){
		var i , random_num , temp_array = this.ary , array_length = this.length , temp_elemnt;
		for(i = 0 ; i < array_length ; i++){
			random_num = Math.floor(Math.random() * temp_array.length);
			temp_element = temp_array[random_num];
			temp_array.splice(random_num,1);
			this.shuffled_array.push(temp_element);
		}
	},
	append_img : function(){
		this.obj = document.createElement("img");
		this.obj.setAttribute( "src" , "live/" + this.shuffled_array[0] + ".jpg");
		this.tgt.appendChild(this.obj);
		job = this;
		this.count++;
	},
	img_change : function(){
		job.obj.setAttribute( "src" , "live/" + job.shuffled_array[job.count] + ".jpg");
		job.count++;
		job.count %= job.length;
	}
/*
	img_change : function(){
		this.obj.setAttribute( "src" , "live/" + this.shuffled_array[this.count] + ".jpg");
		this.count++;
		this.count %= this.length;
	}	//イベントにメソッドを設定すると、thisがnewしたオブジェクトじゃなくてメソッドを設定した要素になっちゃう。
*/
}
onload = function(){
	var random_obj = new Random_img(num_ary,document.getElementById("tgt"));
	random_obj.lord_img();
	random_obj.random_img();
	random_obj.append_img();
	random_obj.obj.onclick = random_obj.img_change;
	//if(addEventListener)random_obj.obj.addEventListener( "click" , random_obj.img_change , false );
}

//--></script>

<div id="tgt">
</div>
スポンサーサイト



  1. 2006/11/17(金) 20:51:04|
  2. サンプルソース|
  3. トラックバック:3|
  4. コメント:9

ブログ日本一

FC2ブログが月間アクティブユーザー数で日本一になったということで、おめでとうございます。

記念にFC2IDポイントを500ポイントプレゼントしていただけるということなので、早速トラックバックしてみることにします。

さすがはFC2ですね。イェ~イ!

FC2インフォメーション ブログ日本一!100万円プレゼント

  1. 2006/10/04(水) 23:26:27|
  2. 雑記|
  3. トラックバック:7|
  4. コメント:0

Mr.トランプマンのトランプが当たりました。

card0

Mr.トランプマンという携帯用サイトでトランプ3枚当てをしているわけですが、当たった人が大勢いる場合は当然抽選になってしまいます。

そんなわけで、なかなか3万円は当たらないわけですが、この前敗者復活みたいなゲームでトランプが当たりました。

スクリプトとか使わずに勘でやった方が当たりやすいみたいです(爆)。

それにしても、もっと更新しないとね…。

card1


  1. 2006/07/17(月) 20:47:22|
  2. トランプ3枚当て|
  3. トラックバック:0|
  4. コメント:0

ネットマイル

たぶん他の方も書いていると思いますが、ネットマイルについて。


共通ポイントプログラム・ネットマイル

いろいろなポイントプログラムがありますが、最初に始めるのにはネットマイルあたりがいいんじゃないでしょうか。

モバイルネットマイルもかなりお勧めです。

  1. 2006/06/09(金) 22:39:41|
  2. 雑記|
  3. トラックバック:0|
  4. コメント:2

トランプ3枚当てスクリプト(その13)

3月15日正解発表分。今回は場合分けがややこしくて何回かバグ修正しました。


<script type="text/javascript">
/*
*1.2枚は同じマーク。(マークは2種類)		
*2.2枚は同じ数字。(数字は2種類)
*3.マークは赤と黒。
*4.ハートは含まれない。
*5.1枚目の数字は1。

	1.1枚目の記号は["dia","spade","club"]のランダム
	2.1枚目の数字は1
	3.1枚目がsapdeかclubのとき、記号の配列から当該記号を削除して、2枚目の記号はランダム
	4.2枚目の数字は[1,2,3,4,5,6,7,8,9,10,11,12,13]のランダム
	5.3枚目の記号は1枚目と2枚目が同じ場合は異なる色で、赤ならdia、黒ならランダム
	6.3枚目の数字は1枚目か2枚目と同じ数字
	
*/

Array.prototype.random_elm = function(){
	this.random_num = Math.floor ( Math.random() * this.length );
	return this [this.random_num];
}

function choice_card(){
	var mark = ["dia","spade","club"];
	var num_ary = [1,2,3,4,5,6,7,8,9,10,11,12,13];
	var card = [];

	var first_mark = mark.random_elm();
	var first_num = 1;

	var bool = ( first_mark != "dia" );
	if ( bool ) mark = ["dia",first_mark];
	
	var second_mark = mark.random_elm();
	var bool2 = ( first_mark == second_mark );
	if ( bool ) num_ary.splice ( first_num , 1 );
	var second_num = num_ary.random_elm();

	var third_mark;
	if ( bool2 ) third_mark = bool ? "dia" : ( mark = ["spade","club"] ).random_elm();
	else third_mark = ( mark = [first_mark,second_mark] ).random_elm();
	var third_num;
	if ( first_num != second_num ){
		if ( bool2 ) third_num = ( num_ary = [first_num,second_num] ).random_elm();
		else  third_num = ( first_mark == third_mark ) ? second_num : first_num;
	}
	else {	
		if ( !bool ) num_ary.splice ( first_num , 1 );
		third_num = num_ary.random_elm();
	}

	card[0] = first_mark + first_num;
	card[1] = second_mark + second_num;
	card[2] = third_mark + third_num;
	return card.join(",");	
}

var choiced_card = [];
var i , i_max;

for( i = 0 , i_max = 20 ; i < i_max ; i++ ){
	choiced_card[i] = choice_card();
}

var choiced_str = choiced_card.join(",");
var reg_exp;
var str = "";

for( i = 0 ; choiced_card[i] ; i++ ){
	reg_exp = new RegExp( choiced_card[i] , "g" );
	if( ( choiced_str.match( reg_exp ) ).length > 1 ) {
		if( str.indexOf( choiced_card[i] ) > -1 ) {
			choiced_card.splice( i , 1 );
			i--;		//spliceするとインデックス番号がずれるのを修正
		}
		str += choiced_card[i];	
	}
}

var joint_array = choiced_card.join("<br>");
document.write ( joint_array );

</script>

どうでもいいけど、最近JavaScriptの勉強とか全然していない。というか、WebどころかPC全般についてまったく勉強らしいことをしていないっす。

  1. 2006/03/19(日) 18:24:11|
  2. トランプ3枚当て|
  3. トラックバック:1|
  4. コメント:2
次のページ

PUREST

04 | 2023/05 | 06
Sun Mon Tue Wed Thu Fri Sat
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -

Recent Entries

Recent Comments

Recent Trackbacks

Archives

Category

Links

Search

Recommend