指定日時までのカウントダウン
- 指定日時までのカウントダウンで数字を画像で表示する方法についてアドバイスをお願いします。
- HTMLのスクリプトを使用して、指定日時までの残り日数や時間を画像で表示する方法についてアドバイスをお願いします。
- 指定日時までのカウントダウンを実装しようとしていますが、うまくいかないため、助言をいただきたいです。
- ベストアンサー
指定日時までのカウントダウン
指定日時までのカウントダウンで、数字を画像で表示させたモノを作りたいのですが、 いろんなサンプル等を見ながら作ってみたものの、うまくいきません。。。 アドバイスをお願い致します。 <html> <head> <title>指定日までの残り日数+時間を画像で表示する</title> <script language="JavaScript"><!-- function xDay(y,m,d,hh,mm,ss) { today = new Date(); xday = new Date(y,m-1,d,hh,mm,ss); dayMS = (24*60*60*1000,60*60*1000); days = Math.floor((xday.getTime()-today.getTime())/(24*60*60*1000)); hours = Math.floor(((xday.getTime()-today.getTime())%(24*60*60*1000))/(60*60*1000)); minutes = Math.floor((((xday.getTime()-today.getTime())%(24*60*60*1000))/(60*1000))%60); seconds = Math.floor((((xday.getTime()-today.getTime())%(24*60*60*1000))/1000)%60%60); if (seconds<10) { seconds = "0"+seconds; } if (minutes<10) { minutes = "0"+minutes; } if (hours<10) { hours = "0"+hours; } days += ""; for (i=0; i<days.length; i++) document.write("<img src='clock/"+days.charAt(i)+".gif'>"); hours += ""; for (i=0; i<hours.length; i++) document.write("<img src='clock/"+hours.charAt(i)+".gif'>"); minutes += ""; for (i=0; i<minutes.length; i++) document.write("<img src='clock/"+minutes.charAt(i)+".gif'>"); seconds += ""; for (i=0; i<seconds.length; i++) document.write("<img src='clock/"+seconds.charAt(i)+".gif'>"); } // --></script> </head> <body> <script language="JavaScript"><!-- xDay(2008,4,21,12,00,00); // --></script> </body> </html>
- m_t_coco
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
・ document.write()はやめて、imgタグのsrc属性を変更するようにしてみてください。 [例] document.img0.src = "clock/"+days.charAt(i)+".gif"; document.img1.src = "clock/"+days.charAt(i)+".gif"; ...
関連するQ&A
- javascriptにおける指定日時までのカウントダウン
いろいろなサイトを見回りながら「指定日までの残り日数と時間を表示する」のをjavascriptで動かしたいのですがリアルタイムに秒が進んでくれません。知識のある方はどうか間違えてる点のご教授お願いします。 <html> <head> <title>指定日までの残り日数と時間を表示する</title> </head> <body> <script language="JavaScript"><!-- function xDay(y,m,d,hh,mm,ss){ today = new Date(); xday = new Date(y,m-1,d,hh,mm,ss); dayMS = (24*60*60*1000,60*60*1000); days = Math.floor((xday.getTime()-today.getTime())/(24*60*60*1000)); hours = Math.floor(((xday.getTime()-today.getTime())%(24*60*60*1000))/(60*60*1000)); minutes = Math.floor((((xday.getTime()-today.getTime())%(24*60*60*1000))/(60*1000))%60); seconds = Math.floor((((xday.getTime()-today.getTime())%(24*60*60*1000))/1000)%60%60); myDisp=""; if (days != 0)myDisp+=days+"日と "; if (hours != 0)myDisp+=hours+"時間 "; if (minutes != 0)myDisp+=minutes+"分 "; myDisp+=seconds+"秒"; document.myForm.myFormDate.value = myDisp; setTimeout("xday()",1000); } // --></script> <form name="myForm"> <input type="text" size="35" name="myFormDate"> <script language="JavaScript"><!-- xday(); // --></script> </form> <script language="JavaScript"><!-- xDay(2008,9,13,15,00,00); // --></script> </body> </html>
- 締切済み
- JavaScript
- javascript カウントダウンについて
下記のようなjavascript でカウントダウンをしています。 ですが、指定日を過ぎると、00 表示になってしまいます。 これを指定日の指定時間を過ぎたら、-- という表示に変更し、 また、bodyないのタグにidを使って「指定日を過ぎました。」という 表示を出したいのですが、ご教授ねがいます。 <script language="javascript"> <!-- function countdown(year, month, day, hour, minute) { Today = new Date(); Todays_Year = Today.getFullYear() - 2000; Todays_Month = Today.getMonth() + 1; Todays_Day = Today.getDate(); Todays_Hour = Today.getHours(); Todays_Date = (new Date(Todays_Year, Todays_Month, Todays_Day, Todays_Hour, Today.getMinutes(), Today.getSeconds())).getTime(); Target_Date = (new Date(year, month, day, hour, minute, 00)).getTime(); Time_Left = Math.round((Target_Date - Todays_Date) / 1000); if(Time_Left < 0) Time_Left = 0; days = Math.floor(Time_Left / (60 * 60 * 24)); Time_Left %= (60 * 60 * 24); hours = Math.floor(Time_Left / (60 * 60)); Time_Left %= (60 * 60); minutes = Math.floor(Time_Left / 60); Time_Left %= 60; seconds = Time_Left; cDay = document.getElementById("counter_day"); cHour = document.getElementById("counter_hour"); cMin = document.getElementById("counter_min"); cSec = document.getElementById("counter_sec"); cDay.innerHTML = GetFormated(days); cHour.innerHTML = GetFormated(hours); cMin.innerHTML = GetFormated(minutes); cSec.innerHTML = GetFormated(seconds); //Recursive call, keeps the clock ticking. setTimeout('countdown(' + year + ',' + month + ',' + day + ',' + hour + ',' + minute + ');', 1000); } function GetFormated(i) { if(i<10) { return "0"+i; } return i; } //--> </script> </head> <body> <span id="counter_day"></span> <span id="counter_hour"></span> <span id="counter_min"></span> <span id="counter_sec"></span> <script language="JavaScript"> <!-- countdown('07,11,05,21,00'); //-->
- 締切済み
- JavaScript
- javascriptでカウントダウンタイマー
お世話になります。 JavaScriptでカウントダウンをWEBに表示させたいと思っています。 WEBで見つけた3種類を試してみました。 下記、例A 締め切りを1カ月後に指定 <!-- the_day = new Date(2008,11,8) function countdown() { today = new Date() days = Math.floor((the_day-today)/(24*60*60*1000)) hours = Math.floor(((the_day-today)%(24*60*60*1000))/(60*60*1000)) minutes = Math.floor(((the_day-today)%(24*60*60*1000))/(60*1000))%60 seconds = Math.floor(((the_day-today)%(24*60*60*1000))/1000)%60%60 if((the_day - today) > 0){ document.f.days.value = days+"日"+"と"+hours+"時間"+minutes+"分"+seconds+"秒" }else{ document.f.days.value = "締め切りました" } tid = setTimeout('countdown()', 1000) } // --> <body> <FORM NAME=f> <INPUT TYPE=text SIZE=45 NAME=days> </FORM> <SCRIPT Language="JavaScript"> countdown(); </SCRIPT> </body> 以上 ブラウザでの表示「60日と5時間50分18秒」 残り、30日と表示されるべきところが、60日と表示されます。 PCの日付は合ってますし、他の者の環境でも同じ日にちでした。 そこで質問です。 １）試した3種類とも同様の日にちになりました。ということは間違いではなく、何か理由があるのですよね？ ２）<days>を、（-30）にすれば数字的には合うのですが、問題ないでしょうか？ days = Math.floor((the_day-today)/(24*60*60*1000))-30 ３）「22時締め切り」にしたいのですが、時間の指定は出来ないでしょうか？ 初歩以前の質問で申し訳ありませんが、正しい書き方を教えていただければ、嬉しいです。 どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- カウントダウンが設置できないです。
カウントダウンバーをおきたいのですが、設置しているのに表示されません。なぜでしょうか？ソースは以下なんですけど・・・ <script type="text/javascript"> <!-- //new Date(年,月-1,日,時,分,秒) // ↓を希望の時刻に修正して下さい millenium = new Date(2009,5,13,0,0,0) function display() { today = new Date() myMsec= millenium.getTime()-today.getTime(); time0 = Math.floor(myMsec/(1000*60*60*24));// カウントダウン用'日' myMsec -= (time0*(1000*60*60*24)); // 経過秒から'時'を引く time1 = Math.floor(myMsec/(1000*60*60));// カウントダウン用 '時' myMsec -= (time1*(1000*60*60)); // 経過秒から'時'を引く time2 = Math.floor(myMsec/(1000*60)); // カウントダウン用 '分' myMsec -= (time2*(1000*60));// 経過秒から'分'を引く time3 = Math.floor(myMsec/1000);// カウントダウン用 '秒' myMsec -= (time3*(1000)); // 経過秒から'秒'を引く time4 = Math.floor(myMsec/10);// カウントダウン用 '少数秒' for(i=0;i<2;i++){ time2 = '' + '0' + time2; } for(i=0;i<2;i++){ time3 = '' + '0' + time3; } for(i=0;i<2;i++){ time4 = '' + '0' + time4; } time2 = time2.substring(time2.length - 2,time2.length); time3 = time3.substring(time3.length - 2,time3.length); time4 = time4.substring(time4.length - 2,time4.length); if((millenium - today) > 0){ document.f.days.value = "●●まで、あと"+time0+"日と"+time1+"時間、"+time2+"分"+time3+"秒"+time4+"です。" }else{ document.f.days.value = "指定日以降に表示するコメント" } tid = setTimeout('display()', 10) } display() // --> </SCRIPT> わかるかたいらっしゃいますか？お願いします。
- ベストアンサー
- JavaScript
- カウントダウンタイマー
カウントダウンタイマーをJavascriptでもって設置したのですが表示される度に定時からスタートする場合はどうやればよいのでしょうか？つまり仮に4月1日を締め切りにしてそれをすぎたら終了ではなく、常に後3日までや5日までのカウントダウンをしたいのです。言葉足らずな初心者で申し訳ないのですがよろしくお願い致します。以下現在使用のscriptです。 <SCRIPT language=JavaScript> <!-- millenium = new Date(2007,3,31,23,59,00) function display() { today = new Date() myMsec= millenium.getTime()-today.getTime(); time0 = Math.floor(myMsec/(1000*60*60*24));// カウントダウン用'日' 取得 myMsec -= (time0*(1000*60*60*24)); // 経過秒から'時'を引く time1 = Math.floor(myMsec/(1000*60*60));// カウントダウン用 '時' 取得 myMsec -= (time1*(1000*60*60)); // 経過秒から'時'を引く time2 = Math.floor(myMsec/(1000*60)); // カウントダウン用 '分' 取得 myMsec -= (time2*(1000*60));// 経過秒から'分'を引く time3 = Math.floor(myMsec/1000);// カウントダウン用 '秒' 取得 myMsec -= (time3*(1000)); // 経過秒から'秒'を引く time4 = Math.floor(myMsec/10);// カウントダウン用 '少数秒' 取得 for(i=0;i<2;i++){ time2 = '' + '0' + time2; } for(i=0;i<2;i++){ time3 = '' + '0' + time3; } for(i=0;i<2;i++){ time4 = '' + '0' + time4; } time2 = time2.substring(time2.length - 2,time2.length); time3 = time3.substring(time3.length - 2,time3.length); time4 = time4.substring(time4.length - 2,time4.length); time0 = time0 - 31; if((millenium - today) > 0){ document.f.days.value = "締め切りまで"+time0+"日と"+time1+":"+time2+":"+time3+"."+time4+"です" }else{ document.f.days.value = "受け付けは終了しました" } tid = setTimeout('display()', 10) } display() // --> </SCRIPT>
- ベストアンサー
- JavaScript
- 指定日まで画像カウントダウン表示一桁の残り日数を「01」のようにしたい
指定日まで画像カウントダウン表示一桁の残り日数を「01」のようにしたい。当日以降は「00」で停止させたい ある指定日時までの画像カウントダウン表示を以下のようにjavascriptで作成して、残り日数の数字を imageファイルで表示しているのですが、残りが一ケタになったときに「02」「01」のようにする、 また、当日が来たら「00」で止まるようにしたいのですが方法がわかりません。 javascriptで上記のような仕様にすることは可能なのでしょうか。 よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <script language="javascript"><!-- dir = "img/"; date1 = new Date(); date2 = new Date(2010, 11, 30); // YYYY, MM - 1, DD d = (date2.getTime() - date1.getTime()) / (24 * 60 * 60 * 1000); d = Math.abs(Math.ceil(d)); s = d.toString(); for (i = 0; i < s.length; i++) { document.write("<IMG SRC=\"" + dir + s.charAt(i) + ".gif\">"); } //--></script> </head> <body> <script src="js/date.js"></script>日 </body> </html>
- ベストアンサー
- JavaScript
- ソースコードが読めません
html> <head> <title>スクールバス時刻表</title> <script language="JavaScript"> <!-- baseURL = "image1/"; ext = ".gif"; (new image1()).src = baseURL + "6.gif"; (new image1()).src = baseURL + "7.gif"; (new image1()).src = baseURL + "8.gif"; (new image1()).src = baseURL + "9.gif"; function realTime(){ dt = new Date(); h = "0" + dt.getHours(); h = h.substring(h.length-2,h.length); m = "0" + dt.getMinutes(); m = m.substring(m.length-2,m.length); s = "0" + dt.getSeconds(); s = s.substring(s.length-2,s.length); times = [h.charAt(0),h.charAt(1),m.charAt(0),m.charAt(1),s.charAt(0),s.charAt(1)]; for (i=0; i<6; i++) document.images["RT"+i].src = baseURL + times[i] + ext; } //--> </script> </head> <body onload="setInterval('realTime()',1000)"> <table border="2" bordercolor="powderblue" cellspacing="1" width="450"> <tr bgcolor="black"><th><font color="powderblue" size="4">現在の時刻 </font> <td rowspan="2" bgcolor="white"> <font size=2> スクールバスの時刻表・運行表です。お近くのバス停をご利用ください。</font> </td> </tr> <tr> <td nowrap bgcolor="black"> <img src="image1/0.gif" name="RT0"> <img src="image1/1.gif" name="RT1"> <img src="image1/kugiri.gif"> <img src="image1/2.gif" name="RT2"> <img src="image1/3.gif" name="RT3"> <img src="image1/kugiri.gif"> <img src="image1/4.gif" name="RT4"> <img src="image1/5.gif" name="RT5"> </td> </tr> </table> <p> <table border="0" bgcolor="powderblue" cellpadding="5" width="450"> <tr> <td style="font-size:15px;line-height:130%" align="center" bgcolor="#FFFFF0"> ▼東本町方面 ▼学校町方面 ▼ニュータウン方面 </td></tr></table> </body> </html> 本当はいけないのでしょうけど、一応ソースコードを全部貼り付けてみました。 この方がプログラムの全体像が見やすいと思いまして。 それでは、質問です。 (new image1()).src = baseURL + "6.gif"; (new image1()).src = baseURL + "7.gif"; (new image1()).src = baseURL + "8.gif"; (new image1()).src = baseURL + "9.gif"; 冒頭のこの部分ですが、画像を一時ファイルとして読み込む設定と本には書かれているのですが、今一何を言っているのか分かりません。 新しいImage()メソッドを作ってそこに格納しているんですよね。でも、何故グラフィックが指定されているのでしょうか。 times = [h.charAt(0),h.charAt(1),m.charAt(0),m.charAt(1),s.charAt(0),s.charAt(1)]; for (i=0; i<6; i++) document.images["RT"+i].src = baseURL + times[i] + ext; <img src="image1/0.gif" name="RT0"> <img src="image1/1.gif" name="RT1"> <img src="image1/kugiri.gif"> <img src="image1/2.gif" name="RT2"> <img src="image1/3.gif" name="RT3"> <img src="image1/kugiri.gif"> <img src="image1/4.gif" name="RT4"> <img src="image1/5.gif" name="RT5"> これは初期値の指定でいいのでしょうか。でも、わざわざこれをする必要性があるのですかね。 いきなり、バンッと時刻を表示できないものなのでしょうか。 お訊きしたいのは以上の３点です。 どうか宜しくお願い致します。
- ベストアンサー
- JavaScript
- フラッシュプレイヤーのバージョンを６から７にあげるとストップウォッチが作動しなくなった。
質問させて下さい。 function restartTimer() { hours = "00"; minutes = "00"; seconds = "00"; milli = "00"; buttonPressTime = getTimer()/1000-pauseLength; pause(); } // function pause() { pauseTime = getTimer()/1000; timing = false; } // function unpause() { unpauseTime = getTimer()/1000; pauseLength = (unpauseTime-pauseTime)+pauseLength; timing = true; } // _root.onEnterFrame = function() { totalTime = getTimer()/1000-pauseLength; goTime = totalTime-buttonPressTime; // if (timing) { hours = Math.floor(goTime/3600); minutes = Math.floor((goTime/3600-hours)*60); seconds = Math.floor(((goTime/3600-hours)*60-minutes)*60); milli = Math.floor((gotime-(seconds+(minutes*60)+(hours*3600)))*100); } }; unpausebutton.onRelease = function() { unpause(); pausebutton._visible = 1; unpausebutton._visible = 0; result._visible = 0; }; ソースが長くて申し訳ありません。 このスクリプトをあるサンプルからもらいつかっていたのですが、 テキストエリアにスクロールバーをとりつけるため、パブリッシュの設定でプレイヤーのバージョンを６から７にあげたところ、ストップウォッチが作動しなくなりました。 一体どういう理由によるものなのでしょうか？ お答えいただければ幸いです。 私がつかっているのは、 Windows XP Flash MX 2004 です。 よろしくお願いします。
- ベストアンサー
- Flash
- 画像カウントダウン当時以降を0日に表示したい
javascriptにて画像でカウントダウン表示しようとしています。 下記の質問を参考にしましたが、その当日を過ぎると、カウントアップしてしまいます。 03・02・01・00・01・02・・・ ↑ 当日 指定日まで画像カウントダウン表示一桁の残り日数を「01」のようにしたい http://okwave.jp/qa/q5901649.html 下記の記述で誤っているところあれば教えて頂きたいのですがわかりますでしょうか？ <SCRIPT LANGUAGE="JavaScript"> <!-- dir = "number_sss2012/"; date1 = new Date(); date2 = new Date(2012, 8, 19); // YYYY, MM - 1, DD d = (date2.getTime() - date1.getTime()) / (24 * 60 * 60 * 1000); d = Math.abs(Math.ceil(d)); s = d.toString(); for (i = 0; i < s.length; i++) { if ( d < 0 ) { s = "00"; } else { s = d.toString(); if ( d < 10 ) s = "0"+s; } document.write("<IMG SRC=\"" + dir + s.charAt(i) + ".png\">"); } // --> </SCRIPT>
- ベストアンサー
- JavaScript
- 画像サイズを指定する
1～6まで全て同じサイズ（200*100）の画像があります。 この画像を下記のスクリプトを使用してランダムに表示させ、 マウスを重ねるとその画像に対応した画像に切り替わる （画像1なら画像4という風に） ということをしているんですが、 表示サイズを300*150で表示させるためには どうしたらいいのでしょうか？ <script language="javascript"> <!-- //ランダムにgazouを表示 img = new Array(); img[0] = "画像1.gif"; img[1] = "画像2.gif"; img[2] = "画像3.gif"; img[3] = "画像4.gif"; img[4] = "画像5.gif"; img[5] = "画像6.gif"; n = Math.floor(Math.random()*3); m = n+3; document.write("<img src='"+img[n]+"' border='0' onmouseover=src='"+img[m]+"' onmouseout=src='"+img[n]+"'>"); //--> </script> 基本的なことで申し訳ありません。 どなたかわかる方がいらっしゃれば宜しくお願い致します。
- ベストアンサー
- JavaScript
お礼
ありがとうございました。 ちゃんとカウントダウンするようになりました♪