javascriptによるカウントダウンタイマー制作
- javascriptでカウントダウンタイマーを制作しています。ボタンをクリックすると動いているカウントダウンタイマーに10秒追加したいです。
- 試行錯誤した結果、うまくいかずに悩んでいます。2日経ってしまいました。
- 知識のある方、助けていただけませんか？
- ベストアンサー
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>
- smart_2010
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数9
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 ＞とても参考になりました。 とありましたが、あれは、とてもさんこうにならないとおもうので、さいど。 ぜんかくくうはくは、はんかくにでも。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>CountDown</title> <body> <form action="#"> <p> <input type="text" value="" id="fuga"> <input type="button" value="+10m" onclick="extensionTime(10)"> </p> </form> <script type="text/Javascript"><!-- var time; var base = [ 100000, 24, 60, 60, 1000 ]; var unit = [ '日', '時', '分', '秒', '' ]; var e = document.getElementById( 'fuga' ); var d = ( new Date( 2010, 4 - 1, 20, 0, 0, 0, 0 ) ).getTime( ); //____ function convert( serial ) { return (function ( n, c ) { var u = unit[ c ]; var b = base[ c ] || 1; var r = Math.floor( n / b ); var s = ''; if( !!u ) s = ('000000000' + ( n - r * b )).slice( -( b + '').length ) + u; if( 0 < c ) return arguments.callee( r, c - 1 ) + s; else return n + u; })( serial, 4 ); } //____ function disp( ) { time = d - ( new Date ).getTime( ); if( 0 < time ) { e.value = convert( time ); return true; } else { return false; } } function extensionTime ( minute /* Minute */ ) { if( 'number' === typeof minute ) { d += minute * 60 * 1000; disp( ); } } function demo ( ) { if( disp( ) ) setTimeout( arguments.callee, 1000 ); else e.value = '終了'; } //__ demo(); //--> </script>
その他の回答 (1)
- babu_baboo
- ベストアンサー率51% (268/525)
みじかくてよいのなら。//こういうかいとうが、はんかんかうんだろうなぁ～ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <body> <form action="#"> <p> <input type="text" value="" id="fuga"> <input type="button" value="+10m" onclick="addM(10)"> </p> </form> <script type="text/Javascript"> var a; function hoge(e,y,m,d,j,f,b,ms){ a=(new Date(y,m-1,d,j||0,f||0,b||0,ms||0))-0; (function c(){ var b=(a-(new Date))/1000|0; if(b>0){ e.value = fuga(b,4).replace(/(\d+)(\d{2})(\d{2})(\d{2})$/,'$1日$2時$3分$4秒'); setTimeout(c,1000); }else e.value = 'end'; })(); } function fuga(n,t){ if(!t)return '';var w=[0,10000,24,60,60][t--],r=n/w|0,s=n%w; return fuga(r,t)+(s<10?'0'+s:s); } function addM(m){a+=m*60000} hoge( document.getElementById('fuga'), 2010, 4, 20, 0, 0, 0, 0); </script>
お礼
返答遅れまして申し訳ございません。 とても参考になりました。 本当にありがとうございました。
関連するQ&A
- カウントダウンタイマー
カウントダウンタイマーを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
- 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
- カウントダウンタイマーについて
カウントダウンタイマーで、クリックするとカウントダウンが始まる設定のコードを見つけましたが、 クリックをしないでもカウントダウンするためには、 どのコードを削ったら良いのかわかりませんでした。。 ご教授頂けたら幸いです。 onClipEvent (load) { cnt = 5*1000; _root.cnt_flg = false; } onClipEvent (enterFrame) { if (_root.cnt_flg) { ms = cnt-(getTimer()-_root.my_time); m = Math.floor(ms/60/1000); s = Math.floor(ms/1000)-m*60; if (ms>=0) { this.TM.text = "あと "+m+"分 "+s+"秒"; } else { this.TM.text = "TIMEOVER！"; } } } on (release) { if (!_root.cnt_flg) { _root.cnt_flg = true; _root.my_time = getTimer(); } }
- ベストアンサー
- Flash
- 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
- カウントダウンタイマー 終了後別ページジャンプ
はじめてで 勉強中でカウントダウンタイマーを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
- カウントダウンタイマー
Flashで作成したカウントダウンタイマーの設定時間をJavaScriptで変更することは可能でしょうか？ 例） 11秒のカウントダウンをJavaScriptで50秒に変更等。 また、変更する場合、下記コードのどの部分を変更したら良いか ご教授頂けたら幸いです。 onClipEvent (load) { cnt = 11*1000; _root.cnt_flg = false; if (!_root.cnt_flg) { _root.cnt_flg = true; _root.my_time = getTimer(); } } onClipEvent (enterFrame) { if (_root.cnt_flg) { ms = cnt-(getTimer()-_root.my_time); m = Math.floor(ms/60/1000); s = Math.floor(ms/1000)-m*60; if (ms>=0) { this.TM.text = m; this.TS.text = s; } else { _root.gotoAndPlay("timeover"); } } }
- 締切済み
- Flash
- 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
- カウントダウンタイマーについて質問です。
<script type="text/javascript">var year = "2014";var month = "10";var day = "2";var hour = "0";var minute = "0";var centi = "1"; var convert = "0";var roop = ""; var cnt1 = "日";var cnt2 = "時間";var cnt3 = "分";var cnt4 = "秒"; var baseoffset = "none"; var br1 = "";var br2 = "";var br3 = "";var br4 = ""; var com1 = "適当にカウントダウン中";var com2 = "";var com3 = "です";var com4 = "カウントダウン終了";var end = "2"; var width = "1000";var height = "70"; var font = "arial";var font2 = "7seg4";var size = "32";var l_height = "32";var bold = "";var italic = "";var line = ""; var space = "5px 0px 5px 0px"; var align = "2";var img = ""; var color1 = "FFFFFF";var color2 = "00FF00";var color3 = "000000"; </script> <script type="text/javascript" src="http://countdown.reportitle.com/js/neo1.js"></script><a href="http://countdown.reportitle.com/">カウントダウンタイマー</a><script type="text/javascript" src="http://countdown.reportitle.com/js/neo2.js"></script> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ このカウントダウン終了後に別ページへ飛ぶように 設定したいのですが、分かりません。 例えば、http://www.yahoo.co.jp/に飛ぶようにしたいです。 皆さんのお力添えをお願い致します。
- 締切済み
- JavaScript
- JavaScriptを用いてカウントダウンタイマー
をHP上にセッチしたいのですが、どうにも上手くいきません。 内容としては、初回アクセスより3日間（（残り？？時間？？分？？行？？））といったカウントダウンタイマーを設置し表示させます。初回アクセスより3日間経過した場合は、指定のページが表示されるようにしたいです。 タイマー自体は何とか作成することができたのですが、3日間が経過すると初回アクセス時に開いたページが開けなくなります （ずっと読み込んでいる状態になります）。クッキーを利用すれば良いらしいのですが、私にはさっぱりすぎて...... 制作したコードは以下の通りです、手直し箇所を教えていただければ幸いです。 皆様のお力をお貸しください。 -------------------------------------------------------------------------------- <!-- start of JavaScript vartimeLimit = getTimeLimit( 1375425013, 'http://first_page .html', 72 ); varfirstTime = '<div class="countdownText">3日後に別のページが表示されます。<br />初回アクセス：' + getFirstTimeAccess() + '</div>'; $( function(){displayCountDown(); } ); function displayCountDown() { vartimer; vartoday = new Date() vardays = Math.floor( ( timeLimit - today ) / ( 24 * 60 * 60 * 1000 ) ); varhours = Math.floor( ( ( timeLimit - today ) % ( 24 * 60 * 60 * 1000 ) ) / ( 60 * 60 * 1000 ) ); varmins = Math.floor( ( ( timeLimit - today ) % ( 24 * 60 * 60 * 1000 ) ) / ( 60 * 1000 ) ) % 60; varsecs = Math.floor( ( ( timeLimit - today ) % ( 24 * 60 * 60 * 1000 ) ) / 1000 ) % 60 % 60; varmilis = Math.floor( ( ( timeLimit - today ) % ( 24 * 60 * 60 * 1000 ) ) / 10 ) % 100; if(( timeLimit - today ) > 0){ timer = '<div class="countdownText">残りは ' + days + '日 ' + addZero( hours ) + '時間 ' + addZero( mins ) + '分 '+ addZero( secs ) + '秒 ' + addZero( milis ) + 'です。</div>' $( '.countdown' ).html( firstTime + timer ); tid = setTimeout( 'displayCountDown()', 10 ); }else{ location.href='http://next_page.html'; return; } }
- 締切済み
- 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
お礼
見ず知らずの私などの為に御丁寧にありがとうございます。 心から感謝しております。