カウントダウンJSにタイマーは付けられますか？

2023/08/10 21:48

このQ&Aのポイント

カウントダウンプログラムを使用しているのですが、毎日０時になったらカウントダウンがスタートするように改造したく思います。
カウントダウンが始まる前は非表示にしておきたいです。
使っているソースは以下です。お詳しい方、教えていただけませんでしょうか。

ベストアンサー

カウントダウンJSにタイマーは付けられますか？

2011/03/07 16:30

カウントダウンプログラムを使用しているのですが、毎日０時になったらカウントダウンがスタートするように改造したく思います。（カウントダウンが始まる前は非表示にしておきたいです。）使っているソースは以下です。お詳しい方、教えていただけませんでしょうか。よろしくお願いいたします！ ----------------------------------- <DIV id="myCwww"></DIV> <SCRIPT language="JavaScript"></SCRIPT>

ichigo-tounyu
お礼率87% (14/16)

JavaScript
回答数6
ありがとう数7

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

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

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2011/03/11 20:39 回答No.6

#4、#5です。＞必要となる実行用のタグをお教え願えますでしょうか #5に記した通りですので、実行用（？）のタグ（？）は必要ありません。ほとんどご質問文のものと同型なので、説明もいらないかと思ったのですが… （divのidの「myCwww」ってのだけはわからない名前なので変えてますけど） #4で書いたように、そもそもが、想像だらけの当たるも八卦のものなので、ご質問の回答になっているのかどうかも怪しいです。以下、テストしたソース。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <div id="countdown"></div> <script type="text/javascript">  </script> </body> </html>

質問者

お礼 2011/04/15 18:00

地震などあり、せっかくいただいた回答へのお返事がおくれてしまってたいへん失礼いたしました！毎回とても助かっています、本当にありがとうございました。

その他の回答 (5)

fujillin
ベストアンサー率61% (1594/2576)

2011/03/10 18:59 回答No.5

#4です。＞教えていただいたものをそのまま貼り付けると＞何も出てこなかったのですが＞他にも記述する必要はありますでしょうか。どのような貼り付け方をなさったのかわかりませんが、回答に提示したのはスクリプト部分だけです。最低限のＨＴＭＬ構成と、表示対象の要素（およびそのidとスクリプト内のidを一致させておく）が必要です。あたりまえですが、スクリプトは<script>タグの中に。実行は、表示用の要素が読み込まれてから行なうようにしてください。（そうでないと、表示するための要素が無いためエラーになります）日付の変わり目などの全体の検証は行なっていませんが、基本的な動作の確認はfx、IEで行なっています。

質問者

お礼 2011/03/11 13:53

ご回答ありがとうございます！！！ HTMLとCSSしかわからないもので・・・記述する場所、最低限のHTML構成はOKです。必要となる実行用のタグをお教え願えますでしょうか。たびたびの質問で申し訳ございません・・・

fujillin
ベストアンサー率61% (1594/2576)

2011/03/09 16:04 回答No.4

質問の内容がさっぱり把握できてませんけれど、＞１日おきに0:00～23:59のカウントダウンを行い、　「一日おき」というのは隔日ということと解釈。表示する日と、表示しない日が交互にあるということ。　カウントダウンは、時刻が0：0：01だったら「23：59：59」で、段々減少し23：59：59に0：0：01を表示して、24：0：0（0：0：0）に終了すると解釈。　要は、固定時刻（午前0時）へ向けてのカウントダウンと解釈。（固定日の時刻へのカウントダウンではない）＞カウントダウン終了後、また、翌日はカウントダウン開始前に＞指定の定型文を表示させたく思います　時間を表示していないときは、常に「指定文」が表示されていればよいと解釈。　（カウントダウン終了時も同じ。指定文が表示される）・・・と勝手に解釈すると、最初の質問文やご提示のスクリプトとはだいぶ違うような気もしますが当たるも八卦で、こんなかんじ？（未検証）（全角空白は半角に） (function(){ var base = "2011/01/01"; //表示/非表示の基準日 var comment = "定型文"; //非表示時の定型文 var id = "countdown"; //表示用要素のid var element = document.getElementById(id); var divide = function(r, n){ 　var tmp = r.count/n | 0; 　var v = r.count - tmp * n; 　r.count = tmp; 　r.time.unshift( (v<10?"0":"") + v); } var timer = function(){ 　var today = new Date(); 　var n_day = new Date(today.getFullYear(), today.getMonth(), today.getDate()+1); 　var def = (today - new Date(base))/24/60/60/1000 | 0; 　var remain = { time:[], count:(n_day-today)/1000 | 0 }; 　if(def % 2){ 　　element.innerHTML = comment; 　　def = remain.count - 30; 　　if(1>def) def = 1; 　　setTimeout(timer, def * 1000); 　} else { 　　divide(remain, 60); 　　divide(remain, 60); 　　divide(remain, 24); 　　element.innerHTML = remain.time.join(":"); 　　setTimeout(timer, 500); 　} } timer(); })();

質問者

お礼 2011/03/10 10:35

fujillinさん、今回もご回答いただき本当にありがとうございます！！！説明がうまくできずにすみません・・教えていただいたものをさっそく試してみます！

質問者

補足 2011/03/10 13:02

補足教えていただいたものをそのまま貼り付けると何も出てこなかったのですが他にも記述する必要はありますでしょうか。たいへんお手数ですが教えていただけますでしょうか。よろしくお願いいたします！

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2011/03/08 15:45 回答No.3

"もう一つタイマー"を作って現在時刻を確認し、0時になれば setInterval("myCountd()", 1000); を実行、"もう一つタイマー"を停止する。というのでどうでしょうか。

質問者

お礼 2011/03/09 12:26

talooさん、ご回答ありがとうございます！！！勉強不足で申し訳ないのですが、ソースコード教えていただけますでしょうか。今回のプログラムもサンプルを少し変更しただけで Javascriptの知識がありません。たいへんお手数ですが、タイマーが可能でしたらやり方をお教え願います。すみませんが、よろしくお願いいたします！

質問者

補足 2011/03/10 13:02

教えていただいたものをそのまま貼り付けると何も出てこなかったのですが他にも記述する必要はありますでしょうか。たいへんお手数ですが教えていただけますでしょうか。よろしくお願いいたします！

yyr446
ベストアンサー率65% (870/1330)

2011/03/08 11:14 回答No.2

私が、ご質問の意味を正しく解釈してないのかも知れませんがあなたの意図してる事をクライアントサイトのJavascriptのタイマー？を使って実現する事は不可能です。サーバー側のプログラムを作る必要があります。Javascriptのタイマーはそのjavascriptが動いているページを閉じると消滅するからです。もちろん、ページが表示された時に現在日時と現在時間を取得して、その時点からのオフセットでカウントダウン開始時刻と修了時刻を何らかの規則や、予め用意しておいたデータで決めて、カウントダウン開始時刻前なら定型メッセージ、開始時刻を過ぎているならカウントダウンを開始させるのは出来ます。でもそれは、タイマーの処理じゃ無いです。

質問者

お礼 2011/03/09 12:16

ご回答ありがとうございます！１日おきに0:00～23:59のカウントダウンを行い、カウントダウン終了後、また、翌日はカウントダウン開始前に指定の定型文を表示させたく思います。これはjavascriptでは不可能でしょうか。

yyr446
ベストアンサー率65% (870/1330)

2011/03/07 17:19 回答No.1

＞毎日０時になったらカウントダウンがスタートする毎日0時に、目標年月日日時をその日の23：59：59　にするって事ですか？だとすると、＞カウントダウンが始まる前は非表示にしておきたいに矛盾するような、前日までは非表示？？？

質問者

お礼 2011/03/07 18:32

yyr446様、ご返答ありがとうございます。失礼しました・・・そうですね。毎日0時にカウントダウンが開始になるまで、また、終わったあとは指定した定型文が表示されるようにしたく思います。時間をタイマー指定することは可能でしょうか。

関連するQ&A

カウントダウンタイマー　終了後別ページジャンプ
はじめてで勉強中でカウントダウンタイマーをJavaScriptだけで作ってみました。 <script> window.onload=function countDown(){ setInterval(function countDown(){ //自分で記述する y = 2022;//年 m = 2;//月 d = 13;//日 xday = new Date(y,m-1,d,00,00,00); today = new Date(); setTime = xday.getTime() - today.getTime(); //ミリ秒を日時に変換 days = Math.floor(setTime / 86400000); jikan = Math.floor((setTime % 86400000) / 3600000); hunn = Math.floor(((setTime % 86400000) / 60000) % 60); byou = Math.floor(((setTime % 86400000) / 1000) % 60 % 60); miri = Math.floor((setTime % 86400000) % 60 % 60 % 100); //0-9には0を付け足す if(jikan<10){jikan = '0' + jikan;} if(hunn<10){hunn = '0' + hunn;} if(byou<10){byou = '0' + byou;} if(miri<10){miri = '0' + miri;} //出力 if(xday > today){ var str = "残りあと"+"<span>"+days+"</span>"+"日"+"と"+"<span>"+jikan+"</span>"+"："+"<span>"+hunn+"</span>"+"："+"<span>"+byou+"</span>"+"："+"<span>"+miri+"</span>"+"<br />"; document.getElementById("countDown").innerHTML=str; }else{ var str = "販売は終了致しました"; document.getElementById("countDown").innerHTML=str; window.location.href = 'https://www.yahoo.co.jp/'; } },10); } </script> カウント終了後には別ページに5秒後にジャンプさせたいです。上記のコードをWPに実装してページを開いてみると、カウントダウンは動きます。ただ、終了後に別ページにジャンプしません。カウント終了後、何回もリロードされて、やっとページがジャンプしたと思ったら「サーバーエラー」となり画面が真っ白になります。 window.location.href = 'https://www.yahoo.co.jp/'; ここの書き方が間違っている・・と思うのですが、どうすれば正常に動くのかがわかりません。アドバイスをお願いできないでしょうか。よろしくお願いいたします。
- ベストアンサー
- JavaScript
タイマーをデジタル時計風にするには
※数日前にも「教えて！goo」の同じカテゴリーで質問した者です。 ※結局自分が書いたコードを使ってるんですが... <html> <head> <title>test</title> <script type="text/javascript">  </script> </head> <body onload="javacript:doCountDown();"> <div id='cd'></div> </body> </htm> ※カウントダウンタイマーをデジタル時計風にするには、どうすればいいのでしょうか？（つい最近、「デジタル時計」をアメリカのサイトのサンプルを模倣しながら作ったことならあります。）デジタル数字のイメージ「０～９」と「：」はもう準備来ました。 ”０”をdg0.gif、”１”をdg1.gif～～～～～”９”をdg9.gifとし、”：”をdga.gifとします。これらのイメージを入れつつ、上のコードに沿って動かしたいです。ちなみに、自分が作ったデジタル時計は以下のやつです。
- ベストアンサー
- JavaScript
カウントダウンタイマー
カウントダウンタイマーをJavascriptでもって設置したのですが表示される度に定時からスタートする場合はどうやればよいのでしょうか？つまり仮に4月1日を締め切りにしてそれをすぎたら終了ではなく、常に後3日までや5日までのカウントダウンをしたいのです。言葉足らずな初心者で申し訳ないのですがよろしくお願い致します。以下現在使用のscriptです。 <SCRIPT language=JavaScript>  </SCRIPT>
- ベストアンサー
- JavaScript
このスクリプトの間違いを指摘してください。
このスクリプトの間違いを指摘してください。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>test</title> <script type="text/javascript">  </script> </head> <body onload="javacript:doCountDown();"> <div id='cd'></div> </body> </html> 自動更新のカウントダウンタイマーを作ろうと思ってるのですが....
- 締切済み
- Perl
javaスクリプトについて質問です。カウントダウンタイマーなのですが、
javaスクリプトについて質問です。カウントダウンタイマーなのですが、下記コードを入力したのですが、ホームページ上ではうまく作動しません。どこを訂正したらよろしいのでしょうか？わかる方教えて下さい。  <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="cookie.js"></script> <script type="text/javascript" src="check.js"></script> <script type="text/javascript">  </script>
- ベストアンサー
- JavaScript
カウントダウンのタグ
おバカな質問でごめんなさいです(T_T) 笑わないでね？！呆れないでね？！カウントダウンのカウンター（？）を置きたくていろんなサイトを見て作ろうと思ったのですがこれじゃ～表示されなくて… 何が足りないですか？（）の中ってどうするのですか？たぶん… メチャクチャだと思うのでここに質問すること事態恥ずかしくて迷いましたが宜しくお願いします。 m( _"_ )mペコ♪  <script language="javascript">  </script>
- ベストアンサー
- HTML
JavaScriptで平日のみをカウントダウンするには?
以下のプログラムは土日は無視されますが祝日も平日としてカウントダウンされてしまいます。土、日、祝日を含まない平日のみをカウントダウンするプログラムを教えていただけますでしょうか？ <html> <head> <script language="JavaScript">  </script> </head> <body> <center><table border=2 bordercolor=00ffff cellpadding=5 cellspacing=0> <tr bgcolor="#ffffff"><td bgcolor="#ffff80"> <script language="JavaScript">  </script> </td></tr> </table></center> </body> </html> ご教授の方を宜しくお願いします。
- ベストアンサー
- JavaScript
javascript カウントダウンについて
下記のようなjavascript でカウントダウンをしています。ですが、指定日を過ぎると、00 表示になってしまいます。これを指定日の指定時間を過ぎたら、--　という表示に変更し、また、bodyないのタグにidを使って「指定日を過ぎました。」という表示を出したいのですが、ご教授ねがいます。 <script language="javascript">  </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"> 
- 締切済み
- JavaScript
javascriptによるカウントダウンタイマー制作
只今、javascriptでカウントダウンタイマーを制作しています。ボタンをクリックすると動いているカウントダウンタイマーに１０秒追加するようにしたいのですが、いろいろためしてみたのですがうまくいきません。散々悩んでいるうちに２日もたってしまいました。御存じの方、いらっしゃいましたらどうか教えていただけませんでしょうか？ <script type="text/javascript"> <!-- if (window.attachEvent){ window.attachEvent('onload', showday); }else { window.addEventListener('load', showday , false); } function settime1(){ var year =2011; //年 var mon =4; //月 var day =2; //日 var time =20; //時 var min = 20; //分 var sec = 15; //秒 var xday = new Date(year,mon-1,day,time,min,sec); //基準になる年月日 return xday; } function showday() { var nowday = new Date(); var xday = new settime1(); var passtime= xday.getTime()-nowday.getTime(); //今から基準になる日までの経過時間　1/1000秒単位 var cnt_day = Math.floor(passtime/(1000*60*60*24)); // カウントダウン表示 (日にち) の取得 passtime = passtime -(cnt_day*(1000*60*60*24)); // 経過秒から(日にち)を引く var cnt_hour = Math.floor(passtime/(1000*60*60));// カウントダウン表示 (時) の取得 passtime = passtime -(cnt_hour*(1000*60*60)); // 経過秒から(時)を引く var cnt_min = Math.floor(passtime/(1000*60)); // カウントダウン表示 (分) 取得 passtime = passtime -(cnt_min*(1000*60));// 経過秒から(分)を引く cnt_sec = Math.floor(passtime/1000);// カウントダウン表示 (秒) 取得 passtime = passtime -(cnt_sec*(1000)); // 経過秒から(秒)を引く var cnt_millisec = Math.floor(passtime/10); // カウントダウン表示 (100/1秒) 取得 // 分、秒、ミリ秒を２桁で表示する。 if(cnt_min<10){cnt_min = '0' + cnt_min;} if(cnt_sec<10){cnt_sec = '0' + cnt_sec;} if(cnt_millisec<10){cnt_millisec = '0' + cnt_millisec;} if((xday - nowday) > 0){ document.tbox.dspday.value = cnt_hour+":"+cnt_min+":"+cnt_sec; }else { document.tbox.dspday.value = "終了" } timerID = setTimeout('showday()', 1000); } </script> </head> <body> <form name="tbox" action="#"> <input name="dspday" id="dspday" type="text" style="position:absolute; top:475px;left:55px; font-size : 25px; z-index:3; color:navy; background:transparent; border-width : 0px ;border-style : solid;font-weight :bold ;" size="45" /> <input name="dspdaybtn" type="button" onClick="" value="１０秒追加" style="position:absolute; top:510px; left:70px; z-index:4;"/> </form>
- ベストアンサー
- JavaScript
javascriptカウントダウン終了後別ページへ
javascriptでカウントダウン終了後に別ページに飛ばすリンクを表示したいのですが、どのようにすれば教えていただけますでしょうか？下記スクリプトではカウントダウン終了時に「終了しました」と表示されます。その「終了しました」にリンクを貼りたいです。 <script language="JavaScript" type="text/javascript"> function CountdownTimer(elm,tl,mes){ this.initialize.apply(this,arguments); } CountdownTimer.prototype={ initialize:function(elm,tl,mes) { this.elem = document.getElementById(elm); this.tl = tl; this.mes = mes; },countDown:function(){ var timer=''; var today=new Date(); var day=Math.floor((this.tl-today)/(24*60*60*1000)); var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000)); var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60; var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60; var milli=Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100; var me=this; if( ( this.tl - today ) > 0 ){ if (day) timer += '<span class="day">'+day+'：</span>'; if (hour) timer += '<span class="hour">'+hour+'：</span>'; timer += '<span class="min">'+this.addZero(min)+'：</span><span class="sec">'+this.addZero(sec)+'：</span><span class="milli">'+this.addZero(milli)+'</span>'; this.elem.innerHTML = timer; tid = setTimeout( function(){me.countDown();},10 ); }else{ this.elem.innerHTML = this.mes; return; } },addZero:function(num){ return ('0'+num).slice(-2); } } function CDT(){ var tl = new Date('2013/2/1 00:00:00'); var timer = new CountdownTimer('CDT',tl,'終了しました'); timer.countDown(); } window.onload=function(){ CDT(); } </script>
- ベストアンサー
- JavaScript

カウントダウンJSにタイマーは付けられますか？

カウントダウンJSにタイマーは付けられますか？