• ベストアンサー

カウントダウンJavascript　

Javascriptでホームページにカウントダウンを設置しょうと思っているのですが… やはり、こったモノをと本などを買って勉強しています。 そこでお尋ねしたいのですが、残り　○日○時間○分○，○○秒といったように ○，○○秒というのはできるんでしょうか？よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
noname#30871
noname#30871
回答No.2

> ○，○○秒 確認ですが、このカンマって小数点ですよねこの場合？ だとしたら、こんな感じになるでしょうか……。 中の変数の値は適宜調節してください。 あと、見るマシンによっては激重で不満爆発になるやもしれませんので注意。 <HTML> <HEAD> <TITLE>かうんとだうん♪</TITLE> <SCRIPT language="JavaScript"> <!-- var timerID = 10; var KIZAMImilliSec = 33; // 1000分の33秒ごとにカウント var year = 2010; var month = 5; var day = 1; var hour = 0; var minute = 0; var second = 0; origDate = new Date; origDate.setYear(year); origDate.setMonth(month-1); origDate.setHours(hour); origDate.setMinutes(minute); origDate.setSeconds(second); function putValue() { nowDate = new Date; var restMilliSec = origDate.getTime() - nowDate.getTime(); if(restMilliSec > 0){ var restYear = Math.floor(restMilliSec / (1000*60*60*24*365)); var rest = "" + restYear + "年 "; restMilliSec -= restYear*1000*60*60*24*365; var restDay = Math.floor(restMilliSec / (1000*60*60*24)); rest += "" + restDay + "日 "; restMilliSec -= restDay*1000*60*60*24; var restHour = Math.floor(restMilliSec / (1000*60*60)); rest += "" + restHour + "時間 "; restMilliSec -= restHour*1000*60*60; var restMinute = Math.floor(restMilliSec / (1000*60)); rest += "" + restMinute + "分 "; restMilliSec -= restMinute*1000*60; var restSecond = Math.floor(restMilliSec / 1000); restMilliSec -= restSecond*1000; rest += "" + restSecond + "秒" + restMilliSec; document.dummy.textbox.value = "" + rest; }else{ document.dummy.textbox.value = "おめでとう♪"; } clearTimeout(timerID); timerID = setTimeout("putValue()", KIZAMImilliSec); } // --> </SCRIPT> </HEAD> <BODY onLoad="putValue()"> <SCRIPT language="JavaScript"> <!-- document.write(year + "年" + month + "月" + day + "日"); document.write(hour + "時" + minute+ "分" + second + "秒"); document.writeln("まで　あと……"); // --> </SCRIPT> <FORM name="dummy"> <INPUT type="text" name="textbox" size="50"> </FORM> </BODY> </HTML>

siroyagikuroyagi
質問者

お礼

大変親切に回答して頂き感謝いたします。

その他の回答 (1)

  • setera
  • ベストアンサー率38% (29/75)
回答No.1

結論から先にいいますと、おそらく「原則的にはできない」と思います。 カウントダウンを作るのにはDateオブジェクトから時間を取り出しますよね。でもそのメソッドには"○,○○…"を取り出すものがありません。なのでシステム的に表現することはできません。 ただ、この方法を使えばできそうな気もするんですが。（↓） Dateオブジェクトから",○○"の部分を取り出すことはできないのでただの変数(henと仮定)を利用し、1秒間に9回カウントしてはまた0に戻す関数を作ります。henを"."をはさんで"秒"の変数にくっつけます。（←○.○秒といったように） この一連の動作をタイマーにセットして1秒間に10回カウントダウンの表示を更新します。10回目にはDateオブジェクトからの"秒"が更新されhenの値も0に戻るので、傍目にはミリ秒までカウントしているようにも見えます。 ただ実際に試したことがないので(今思いついただけです)、机上の絵空事に終わるかもしれませんが。

siroyagikuroyagi
質問者

お礼

素早い回答有り難うございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptでカウントダウンタイマー

    「○時間○分○秒○」 のように、時間から秒以下までを カウントダウンするjavascriptを探しているのですが、 「○日○時間○分○秒○」 のように、日付からカウントダウンする javascriptしか見つけることができません…。 時間からカウントダウンを開始できる javascriptを教えて頂けないでしょうか。 可能であればキャンペーン開始前、終了後に ひとこと設定できると嬉しいです。 （例えば「キャンペーンは終了しました。」など） よろしくお願い致します。

  • カウントダウンJavascript

    Ｗ杯開幕までのJavascriptが欲しいと思ってウェブ上で発見した スクリプトを拝借してきて少しコメントを変えて私のサイトに置きました。 でも、2,3変更したい点が有るのです。 私は素人ですのでどこをどうしたら良いかも分かりません。 本を借りてきて少しずつ勉強しているのですが、 できるなら早い内に完成させたいと思い みなさんのお知恵を拝借させていただこうと思いました。 やりたいことはこうです。 1.秒数のリアルタイム表示 キックオフまで後何秒！という風にもカウントダウンしてみたいのです。 2.残り時間による表示切り替え 残り一日を切ったら「後何時間」という風に自動的に切り変えることはできないのでしょうか。 同様に分→秒→キックオフ→秒（経過）→分（経過）という風にできたら最高なのですが。 3.画像表示 カウンタの時間を画像で表示してみたいのです。 1から9までの数字を書いた画像を用意しておいて 残り365日なら3.gif,6.gif,5.gifと順に並べたいのです。 一度にたくさん質問してしまい申し訳有りません。 どうかよろしくお願いいたします。

  • javascriptを用いたカウントダウンタイマ-

    javascriptを用いた、カウントダウンタイマーの方法を教えて頂けないでしょうか？ 【午前9時からカウント開始】（あと”9時間59分59秒") 　　　　　　↓ 【午後19時に終了】（あと”0時間00分00秒") ※毎日繰り返し （午後19時から午前9時までの間は、何かコメントを表示させておく。） このようなカウントダウンも出来るものなのでしょうか？ 超初心者ですが、独学で勉強したくて色々見てますが…、難しくてなかなか…。 どなたか、お知恵を貸して頂けたら、幸いです。 宜しくお願いします。

  • javascript カウントダウンタイマーについて

    下記のサイトのようなカウントダウンタイマーを作成したく 色々と検索してるのですが全然見つかりません。 http://www.countdownbooster.com/ このサイトのように100分の1秒まで表示させて 例えば期限を明日と数字で設定するのではなく サイトに訪れてから●日後や●分後を期限にしたいのです。 尚且つクッキーで期限が切れたら何度訪れても終了！と表示させたいのですが可能でしょうか？ 下記のサイトが訪れてから1週間後に終了と表示されるサイトです。 http://www.successlab.jp/u25/full/ ※但し、100分の1秒まで表示されてません。 例えば7月31日と指定して 残り8日と●時間●分●秒●と 表示出来るJavaScriptはあるのですが 上記のような全てを満たすJavaScriptがありません。 ご存じの方がいたら是非、力をお貸し下さいませんか？ 宜しくお願い致します。

  • Javascriptでカウントダウン

    急いでいます。 Javascriptで、アクセスして読み込まれるとき、読み込まれてから20秒だけカウントダウンしたいのですが、どのようにすればよいのか分かりません。 初めに20と表示され、19,18,17,16, ..... 3,2,1,0で終わるようなカウントダウンタイマーを作りたいんです。できれば２桁だけ小数も表示させたいです。19.04 19.03 19.02 19.01 19.00 ..... よろしくおねがいします。

  • 何度もリピートする、カウントダウンJavaScript

    http://www.cj-c.com/java_s/java15.htm こんな感じのカウントダウンのスクリプトのアレンジで、何度も繰り返すものは作れないでしょうか？（秒以下の単位までのもので） 例えば、３日間のカウントダウンで、「あと２日２３時間５９分５９秒５９」からカウントダウンしていって、「あと０日００時間００分００秒０１」になると、また「あと２日２３時間５９分５９秒５９」に戻り、延々と３日間のリピートが繰り返されるものです。 可能であれば、教えて頂きたいです。よろしくお願いします。

  • Javascriptのカウントダウンについて

    現在、カウントダウンタイマーをJavascriptで書いておりますが、質問させて下さい。 例えば朝７時からカウントダウンを開始し、夕方４時になったら「カウントダウン終了！次回のカウントダウンは○月○日（○曜日）です！」とコメントさせて次回のカウントダウン日時（朝７時）になったら、自動でまたカウントダウンさせたい（夕方４時にカウントダウン終了）のですが、どうすれば出来るのでしょうか？m(_ _)m ちなみに○月○日（○曜日）の部分は基本的に次の日にさせたいのですが、次の日が日曜日や祝日の場合はそれを除いた次の日を表示させたいです。 これはJavaScriptで出来ますか？ JavaScriptのコードはここを参考に引用しています。 http://javascript123.seesaa.net/article/102586838.html どなたか教えてください。よろしくお願いいたします。

  • 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時締め切り」にしたいのですが、時間の指定は出来ないでしょうか？　 初歩以前の質問で申し訳ありませんが、正しい書き方を教えていただければ、嬉しいです。 どうぞよろしくお願い致します。

  • ブラウザの「戻る」を押しても有効なカウントダウン

    ブラウザの「戻る」を押しても有効なカウントダウン PHPで取得した時間を使ってカウントダウンを表示させるプログラムに 挑戦中なのですが、今の知識で解決出来ない問題が出ているのでご質問させて 頂きました。 PHPで取得した時間が45秒だった場合、残り45秒からカウントダウンが 始まります。javascriptにこの「45」を読み込ませて、45秒から 1秒ずつリアルタイムに秒が減っていくという形です。 0秒が過ぎたら-1秒、-2秒と進んでいきます。 下記のスクリプトで、それが実現出来ました。 －－－－－－－－－－－－－－－－－－－－－－ <script type="text/javascript"> <!-- var phpsecond=<?php print date(s) ?>; var countSecond=60; var nowSecond=second; function countdown(){ document.getElementById('countdown').innerHTML=countSecond-nowSecond; nowSecond++; setTimeout('countdown()',1000); } //--> </script> </head> <body onload="countdown()"> －－－－－－－－－－－－－－－－－－－－－－－ ただ問題があって、ずっとこのページを見ている状態であれば 大丈夫なのですが、 ページを移動させた後、ブラウザの「戻る」でこのページに戻ると、 移動していた間の時間が止まってしまい、 ページを移動する直前の秒からカウントダウンが再開してしまいます。 これを何とか、ページに戻ってきた時にすぐ正しい秒を表示し直すように 命令したいのですが可能でしょうか？ 私なりに考えたのが、 PHPの時間とjavascript時間との差をjavascriptに変数で覚えさせれば 常に正しい時間が表示出来るのかなと思いました。 良い記述方法がございましたら、ご教授頂けますと幸いです。 ※それから、このページに戻った際、カウントダウンが0秒を切っていた場合は ページを自動的にリロードするようにしたいです。 宜しくお願い致します。

  • JavaScriptで毎日カウントダウン土日祝除く

    初めまして、よろしく御願いします。 JavaScriptで毎日カウントダウンをしたいと思っています。 条件１ 0時から10時までカウントダウンをする（月～金） 条件２　土日祝を除く（イレギュラー用に日付指定もできる） 条件３　時間：分：秒：ミリ秒の表示にしたい 以上の条件を満たしたものを作りたいと思っています。 検索をするとカウントダウンは出てくるのですが、 これといって適合するものはなく。。 悩んでいます。 お分かりになる方がいらっしゃいましたらご教示を御願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する