締切済み

JavaScriptでイベントまでのカウントを作りたい。

2009/05/30 00:45

教えてください。JavaScript初心者です。 JavaScriptでイベントまでのカウントを作りたいのですが、日にちを画像でだして、指定した日がきたら、画像で差し替えるようにしたいのですが、どうすればいいのでしょうか？ ※現在は指定した日がきたら、「おめでとう」の文字がでるようにしてます。書いたタグは下記になります。アドバイスをお願いします。 <script language="JavaScript"></script>

Malissa
お礼率66% (4/6)

JavaScript
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

みんなの回答

babu_baboo
ベストアンサー率51% (268/525)

2009/05/30 18:01 回答No.2

ふつうのあくせすかうんたより、てをくわえたじょ！がぞうは、ふりーのあくせすかうんたようのがぞうをみつけてちょ！ 0.gifから9.gifまでね。こうはんは、つかれてぐだぐだになってしまったじょ。ばぶぅ～ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Counter</title> <style type="text/css"> #waku div { float:left; } </style> <body> <div id="waku"> 　<div id="counter0"></div> 　<div id="counter1"></div> 　<div id="counter2"></div> 　<div>日</div> 　<div id="counter3"></div> 　<div id="counter4"></div> 　<div>時</div> 　<div id="counter5"></div> 　<div id="counter6"></div> 　<div>分</div> 　<div id="counter7"></div> 　<div id="counter8"></div> 　<div>秒</div> 　<br style="clear:both;"> </div> <script type="text/Javascript"> Counter = function () { 　this.init.apply(this, arguments); }; Counter.prototype.init = function (id, num, changeTime) { 　var imagePath = './img/'; 　var imageType = '.gif'; 　var i, g, e = document.getElementById(id); 　e.style.position = 'relative'; 　e.style.zIndex = '0'; 　for (var i=0; i<10; i++) { 　　g = document.createElement('IMG'); 　　g.alt = i +''; 　　g.src = imagePath + i + imageType; 　　g.style.position = 'absolute'; 　　e.appendChild(g); 　} 　e.style.width = g.offsetWidth + 'px'; 　e.style.height = g.offsetHeight + 'px'; 　e.style.overflow = 'hidden'; 　this.num = e.childNodes; 　this.r = g.offsetHeight / (2 * Math.tan(Math.PI/10)); 　this.h = g.offsetHeight / 2|0; 　this.timerId = null; 　this.setNumber(num); }; Counter.prototype.setNumber = function (num) { 　this.number = num % 10; 　var k = -36 * num -18; 　var i, s; 　for (i = 0; i < 10; i++) { 　　y0 = Math.sin((k+i*36)*Math.PI/180)* this.r; 　　y1 = Math.sin((k+i*36+36)*Math.PI/180)* this.r; 　　z0 = this.r + (Math.cos((k+i*36)*Math.PI/180)* this.r)|0; 　　s = this.num[i].style; 　　s.top = this.h + y0 + 'px'; 　　s.height = Math.abs(y1-y0+1) + 'px'; 　　s.zIndex = z0+''; 　} } Counter.prototype.moveNumber = function (num, time, step) { 　var interval = (time*1000)/step; 　var sa = num - this.number; 　if (Math.abs(sa) > 5) sa = - 10 + sa; 　this.c = step; 　　this.b = sa/step; 　this.d = num; 　this.timerId = setInterval((function(cb_){ return function() { cb_.change(); };})(this) , interval); } Counter.prototype.change = function () { 　this.setNumber(this.number + this.b); 　if (--this.c > 0) return; 　clearInterval(this.timerId); 　this.setNumber(this.d); } Number.prototype.addZero = function(n){ return ('000000000000'+ this).slice(-n); }; var num = []; for (i = 0; i<9; i++) num[i] = new Counter('counter'+i, 0); var point = new Date(2010, 1 -1, 1, 0, 0, 0, 000); var counter_str = '000000000'; var tId = setInterval(function() { 　var sa = (point- (new Date))/1000 |0; 　if (sa<0) {alert("osimai"); clearInterval(tId);} 　var sc = ( sa % 60).addZero(2); 　var mi = ( (sa / 60 |0) % 60).addZero(2); 　var ho = ( (sa / 3600|0) % 24).addZero(2); 　var dy = ((sa/(60*60*24)) |0).addZero(3); 　var str = dy + ho + mi +sc; 　　for (var i=0; i<9; i++) { 　　var a = counter_str.charAt(i); 　　var b = str.charAt(i); 　　if (a != b) num[i].moveNumber(b,0.5,10) 　} 　counter_str = str; }, 1000); </script>

質問者

お礼 2009/05/30 23:53

ありがとうございます！！とても助かります！感謝です！ご丁寧にありがとうございました！

SAYKA
ベストアンサー率34% (944/2776)

2009/05/30 02:05 回答No.1

この場合に必要になる考えは・・・１．残り日数を「画像で表示」２．指定の日が「来ているか過ぎている」場合1ではない画像を表示その準備として既にifが書かれてて文字は出ているという事で判断式自体は合っているとして・・・ 1-1．日付の各桁を1文字ずつにバラす 1-2．各数値に有った画像を表示(0～9)を桁数繰り返す 1-1は数値の文字列化か「10で割って余りを求めていく」なんてやり方もあるけれどやりやすそうな方法を模索してみて。 (この部分は好みが分かれるので割愛) 1-2および2に関してはwriteの中で <img src="～～"> を書出せば良いだけだね。

質問者