▽1
●
oil999 ●100ポイント ベストアンサー |
下記のスクリプトをお試しください。
数字の画像は、配列imageNumにURLまたは相対パス指定でセットしてください。
最後に表示する画像はimageZeroです。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>笑ったら罰ゲーム</title> <link rel="stylesheet" href="/css/reset.css" type="text/css"> <link rel="stylesheet" href="/css/layout.css" type="text/css"> <link rel="stylesheet" href="/css/general.css" type="text/css"> <script type="text/javascript"> <!-- TimerStart = 10; //タイマの開始値 Timer = TimerStart //カウントダウンタイマ Wait = 1000; //待ち時間(ミリ秒) //カウントゼロで表示する画像URL imageZero = 'http://cdn.www.st-hatena.com/images/logo_portal_hatena.gif'; //数字画像のURL imageNum = new Array(10); imageNum[0] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-0L.jpg'; imageNum[1] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-1L.jpg'; imageNum[2] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-2L.jpg'; imageNum[3] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-3L.jpg'; imageNum[4] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-4L.jpg'; imageNum[5] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-5L.jpg'; imageNum[6] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-6L.jpg'; imageNum[7] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-7L.jpg'; imageNum[8] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-8L.jpg'; imageNum[9] = 'http://ec.midori-anzen.com/img/goods/L/AS-24-9L.jpg'; //初期化 function hogeInit() { html = '<button type="button" class="punch" onClick="hogeStart()">スタート</button>'; document.getElementById("disp").innerHTML = html; } //開始 function hogeStart() { Timer = TimerStart; setTimeout(hogeCountDown, Wait); } //カウントダウン function hogeCountDown() { if (Timer <= 0) { html = '<p><img src="' + imageZero + '" alt="imageZero" /></p>'; html += '<button type="button" class="punch" onClick="hogeStart()">セーフ</button>'; document.getElementById("disp").innerHTML = html; clearTimeout(); } else { Timer--; html = '<img src="' + imageNum[Timer] + '" alt="counter" />'; document.getElementById("disp").innerHTML = html; setTimeout(hogeCountDown, Wait); } } --> </script> </head> <body onLoad="hogeInit()"> <article id="container"> <header id="gHeader"> </header> <section id="conts"> <h1>笑うと罰ゲーム</h1> </section> <div id="disp"></div> <footer id="gFooter"> </footer> </article></body> </html>
こういうのは、jQuery のプラグインを使うと、お手軽にカッコよくできると思うな。
これを使って試してみました。
http://www.htmldrive.net/items/show/924/Cool-countdown-with-jquery-
jsdo.it で試してみたのがこちら。
http://jsdo.it/a-kuma3/bcHr
ソースコードの抜粋。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://jquery-countdown.googlecode.com/svn/trunk/js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script> <script> $('#btn').click(function(){ $('#counter').countdown({ image: 'http://jquery-countdown.googlecode.com/svn/trunk/img/digits.png', startTime: '10', timerEnd: function(){ alert('おわったよ!'); }, format: 'ss' }); }); </script> <button id="btn">start</button><br> <div id="counter"></div>