javascriptカウントダウン終了後別ページへ

このQ&Aのポイント
  • javascriptでカウントダウン終了後に別ページに飛ばすリンクを表示したい
  • カウントダウン終了時に表示される「終了しました」にリンクを貼りたい
  • 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>

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

HTML上でid=CTDの要素が何になっているのか不明ですが… 「終了しました」の文字列の代わりに、その要素内に入れたいHTMLソースを記述しておけばそれで表示されませんか? 例えば  '<a href="~~">hoge</a>' とか。

ecnomikata
質問者

お礼

できました!ありがとうございます!!

関連する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 カウントダウンについて

    下記のような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を用いてカウントダウンタイマー

    を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; } }

  • 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"> <!-- start of JavaScript // 有効期限を取得 var timeLimit = getTimeLimit( 1259629393, 'http://', 192 ); // 初回アクセス日を取得 var firstTime = '<div>初回アクセス:' + getFirstTimeAccess() + '</div>'; // 残り時間を表示 $( function() { displayCountDown(); } ); function displayCountDown() { var timer; var today = new Date() var days = Math.floor( ( timeLimit - today ) / ( 24 * 60 * 60 * 1000 ) ); var hours = Math.floor( ( ( timeLimit - today ) % ( 24 * 60 * 60 * 1000 ) ) / ( 60 * 60 * 1000 ) ); var mins = Math.floor( ( ( timeLimit - today ) % ( 24 * 60 * 60 * 1000 ) ) / ( 60 * 1000 ) ) % 60; var secs = Math.floor( ( ( timeLimit - today ) % ( 24 * 60 * 60 * 1000 ) ) / 1000 ) % 60 % 60; var milis = Math.floor( ( ( timeLimit - today ) % ( 24 * 60 * 60 * 1000 ) ) / 10 ) % 100; if(( timeLimit - today ) > 0){ timer = '<div>残り ' + days + '日 ' + addZero( hours ) + '時間 ' + addZero( mins ) + '分 '+ addZero( secs ) + '秒 ' + addZero( milis ) + 'です。</div>' $( '.countdown' ).html( firstTime + timer ); tid = setTimeout( 'displayCountDown()', 10 ); }else{ location.href='http://'; return; } } // end of JavaScript --> </script>

  • 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の日付は合ってますし、他の者の環境でも同じ日にちでした。 そこで質問です。 1)試した3種類とも同様の日にちになりました。ということは間違いではなく、何か理由があるのですよね? 2)<days>を、(-30)にすれば数字的には合うのですが、問題ないでしょうか?   days = Math.floor((the_day-today)/(24*60*60*1000))-30 3)「22時締め切り」にしたいのですが、時間の指定は出来ないでしょうか?  初歩以前の質問で申し訳ありませんが、正しい書き方を教えていただければ、嬉しいです。 どうぞよろしくお願い致します。

  • javascriptによるカウントダウンタイマー制作

    只今、javascriptでカウントダウンタイマーを制作しています。 ボタンをクリックすると動いているカウントダウンタイマーに10秒追加するようにしたいのですが、いろいろためしてみたのですがうまくいきません。散々悩んでいるうちに2日もたってしまいました。 御存じの方、いらっしゃいましたらどうか教えていただけませんでしょうか? <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秒) 取得 // 分、秒、ミリ秒を2桁で表示する。 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="10秒追加" style="position:absolute; top:510px; left:70px; z-index:4;"/> </form>

  • 特定の時間に複数のメッセージからアットランダムに表示する

    1 特定の時間(たとえば、朝の7時から8時まで)に2 複数のメッセージ(たとえば、どこかのページへのリンク)の中からランダムに表示するジャバスクリプトを作りたいと思っています。 1と2は別個のスクリプトがあるのですが、これを統合すればいいのでは、と思ってやっているのですが、わかりません。なにとぞ宜しくお願いいたします。 ================= 1 mes=new Array(24); mes[0]=""; mes[1]=""; //略 mes[23]=""; function timer(){ myDate=new Date(); myTime=myDate.getHours(); document.write(mes[myTime]); } timer(); //--> 2 var quotes=new Array() quotes[0]='メッセージかリンク' var whichquote=Math.floor(Math.random()*(quotes.length)) document.write(quotes[whichquote])

  • カウントダウン終了後のフレーム移動が出来ません。

    色々な箇所で検索したのですが上手く見つからず、こちらで質問させて頂きます。 現在、2007年7月31日0時0分0秒をゴールとする カウントダウンの時計を作成しています。 残り時間のカウントダウンは作成が出来たのですが、 カウントが「0」になった時(2007年7月31日0時0分0秒になった時)に 次のフレームへ行くことが出来ません。 やりたいと思っている事は、 ・表示されている画面・  「7月31日まで、残り●日と●時間●分●秒」     ↓  「祝!サイト開設1周年!」 と、カウントが「0」になると同時に 時計が消えて、次のフレームに用意してある「祝!サイト開設1周年!」の画像に替えたいのです。 現在カウントダウンに使用しているASは以下の通りです。 --------------------------- goal_year = 2007; goal_month = 7; goal_day = 31; goal_date = new Date(goal_year, goal_month-1, goal_day, 0, 0, 0); this.onEnterFrame = function() { now_date = new Date(); count_time = goal_date-now_date; count_day = Math.floor(count_time/(24*60*60*1000)); count_hour = Math.floor(count_time/(60*60*1000))-count_day*24; count_minute = Math.floor(count_time/(60*1000))-count_day*24*60-count_hour*60; count_second = Math.floor(count_time/1000)-count_day*24*60*60-count_hour*60*60-count_minute*60; counter = count_day; counter2 = count_hour; counter3 = count_minute; counter4 = count_second; }; --------------------------- (このスクリプトは、以前こちらのサイトで検索した時に見つけたスクリプトを利用させて頂いています) どなたかご教授願いますでしょうか。。。 どうぞよろしくお願い致します。

  • JavaScriptカウンターにミリ秒を追加したい

    http://www.gifu-marathon.jp/ こちらのページに使われているカウントダウンを参考にしています。 このカウンターにミリ秒を追加したいのですが、どのように記述したらいいでしょうか。 <script type="text/javascript"> (function($){ $.fn.countdownSimple = function(options) { var opts = $.extend({}, $.fn.countdownSimple.defaults, options); return this.each(function() { CountDown($(this), opts); }); function CountDown ($obj, opts) { var now, point, diff, dy, hr, minr, sr, thisInterval = window.setInterval( function() { now = new Date(); point = new Date( opts.until ); diff = Math.floor( ( point.getTime() - now.getTime() ) / 1000 ); dy = Math.floor( diff / 86400 ); hr = Math.floor( diff % 86400 / 3600 ); minr = (Math.floor( diff % 86400 / 60 ) % 60 ); sr = (Math.floor( diff % 86400 % 60 ) % 60 ); if(diff>0) { $obj.html( "" + dy + ":" + "" + zerofill(hr) + ":" + "" + zerofill(minr) + ":" + "" + zerofill(sr) + "" ); } else { $obj.html( opts.complete ); clearInterval(thisInterval); } }, 980); }; function zerofill(str) { var str = "00" + str; return str.substr(str.length-2, 2); }; }; $.fn.countdownSimple.defaults = { until: "2011/12/31", complete: "Time Over!" }; })(jQuery); $(document).ready( function() { $('div#countdown').countdownSimple({ until: "2014/5/18 9:00:00", complete: "岐阜清流ハーフマラソンスタート!!" }); }); </script>

  • javascriptで数値を3桁区切りで表示

    数値を取得して消費税計算をして四捨五入して、あとは3桁区切りでカンマを付けて戻すだけなのですが、カンマの付け方がわかりません。 よろしくお願いします。 <script type="text/javascript"> var tax = 1.05; var targetClass='.price'; $(function() { $(targetClass).each(function(){ var price_a = $(this).text(); var price_b = price_a.replace(/,/g, ""); var price_c = price_b * tax; var price_d = Math.round(price_c); //切り上げ var price_d = Math.ceil(price_c); //切り捨て var price_d = Math.floor(price_c); $(this).text(price_d); }); }); </script> <p class="price">1,000</p> <p class="price">1,250</p> <p class="price">1,360</p> <p class="price">1,450</p> <p class="price">1,550</p> <p class="price">1,600</p>

専門家に質問してみよう