自分のバンドのサイトを作るのに、久しぶりにコードを書いてみました。
イベントハンドラにメソッドを設定すると、 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>
もともとキャバクラのサイトを見ているうちにインターネットにハマり、最近はJavaScriptに凝っている今日この頃です。
FC2 Blog Rankingに参加中。
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 | - | - |