- 締切済み
現在時刻の表示と割り込み処理
ホームページを作成しようと思います。（初心者です。） ホームページ上で、デフォルトで現在時刻と対応した数値画像を所定の画像上に表示させ、訪問者がマウスでそのページ上のボタンをクリックする等のイベントが発生したら、その画像を置いた同じ場所に別の画像を一定時間配置し、その後押されたボタンに対応したページに切り替わるという一連の動作をさせたいです。（意図が伝わったでしょうか、、） 参考になる解説ページを教えていただけるだけでもありがたいです。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- sh_hirose
- ベストアンサー率66% (56/84)
やるとしたらJavaScriptを使用しないといけません。 簡単に作成しました。 こんな感じになると思います。 （テストをしていないので、細かな修正は行ってください。） <html> <head> <title>sample</title> <script type="text/javascript"> // <!-- var images[] = {"0.jpg", "1.jpg", "2.jpg", "3.jpg", ・・・}; var flg = false; // 現在時刻の取得 function timer() { var date = new Date(); // 時 var hour = date.getHours(); if( hour.length = 1 ) { window.document.getElementById("HOUR1").src = images[0]; window.document.getElementById("HOUR2").src = images[hour]; } else { window.document.getElementById("HOUR1").src = images[hour.substring(0, 1)]; window.document.getElementById("HOUR2").src = images[hour.substring(1)]; } // 分 var minute = date.getMinutes(); ・ ・ ・ if( flg == false ) { setTimeout(timer, 500); } } function buttonOnclick() { flg = true; window.document.getElementById("IMAGE").innerHTML = "<img src='sample.jpg'/>" // 時間でループ（以下は一分後に遷移） var date = new Date(); while( date.getMinutes() + 1 > new Date().getMinutes() && date.getSeconds() > new Date().getSeconds()) { } location.href = "http://・・・"; // または for( var i = 0; i < 10000000; i++ ) { } location.href = "http://・・・"; } --> </script> </head> <body onload="timer();"> <div id="IMAGE"><img id="HOUR1"/><img id="HOUR2"/><img src="koron.jpg"/><img id="MINUTES1"/>・・・</div> <input type="button" value="ボタン" onclick="buttonOnClick();"/> </body> </html>
