Javaスクリプトカウントダウンタイマーの訂正方法

このQ&Aのポイント
  • Javaスクリプトを使ったカウントダウンタイマーの動作がうまくいかない場合、下記のコードを訂正することで問題を解決できます。
  • コード内の変数や関数の使い方を確認し、正しく記述されているかを確認してください。
  • また、必要なライブラリやスクリプトファイルが正しく読み込まれているかも確認する必要があります。
回答を見る
  • ベストアンサー

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>

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

 まず、varxxxxxxというのは全部、var xxxxのタイプミスですよね。    そのカウントダウンタイマーのJSはどこから拾ってきたものですか? ご提示されてる部分には、getTimeLimit()とかgetFirstTimeAccess() の関数定義が無いみたいですけど、大丈夫ですか、 check.jsの中にあるんですよね...?

take0514
質問者

補足

これ自体は、拾ってきたものです、、、getTimeLimit()とかgetFirstTimeAccess()にあるかどうかはわからないです、、どう調べたらいいですか??

その他の回答 (1)

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

そのまま動くように作られていると仮定して… 第一に、  jquery.js  cookie.js  check.js の外部ファイル(javascript)がそろっていて、適切なディレクトリにアップされていることが必須です。 第二に、 No1様もご指摘のように、var宣言の部分の記述を正しく訂正してみてください。 それでも動かない場合は、全体の構成のどこかにおかしなところがあることになりますが、肝心の部分(外部ファイル)が提示されていないので、回答者には情報が少なすぎて判断できないところです。 (まぁ、jqueryは間違いなくjqueryでしょうし、cookieはいくつかあるもののうちの一つだろうとは想像できますが、checkはまったく想像がつきません)

関連するQ&A

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

  • ジャバスクリプトの正しい描き方

    ヤフーの解析ソースをそのまま貼ったら Another HTML-lint gatewayで2点注意されました。 1、<SCRIPT>~</SCRIPT> 内の要素はすべてコメントで囲んだ方が安全です。 2、`&js` は不明な実体参照です。 どうすれば良いでしょうか? それと、altが空白でも良いにのでしょうか? ------------------------------------ <script type="text/javascript" src="http://i.yimg.jp/images/analytics/js/ywa.js"></script> <script type="text/javascript"> var YWATracker = YWA.getTracker("XXXX"); YWATracker.addExcludeProtocol("file:"); YWATracker.submit(); </script> <noscript> <div><img src="http://by.analytics.yahoo.co.jp/p.pl?a=XXXX&js=no" width="1" height="1" alt="" /></div> </noscript>

  • カウントダウンタイマーについて質問です。

    <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/に飛ぶようにしたいです。 皆さんのお力添えをお願い致します。

  • ジャバスクリプトが作動しません。

    初めまして、素人なので的外れな質問だったら恐縮です。 以下のようにジャバスクリプトを2つ記述しましたが、後ろに記述した1つしか作動しません。 記述の順番を入れ替えても、やはり後ろに記述した方しか作動しません。 何が悪いのか、どなたか教えて頂けますでしょうか? <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ホームページテンプレート</title> <meta name="description" content="説明を入れます" /> <meta name="keywords" content="キーワード" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/script.js"></script> <link href="css/gallery11.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/glider.js"></script> <script type="text/javascript"><!-- Event.observe(window, "load", function(){ new Glider("album1", { duration:1.0 } ); }); // --></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#viewer'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> </head>

  • 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でカウントダウン終了後に別ページに飛ばすリンクを表示したいのですが、どのようにすれば教えていただけますでしょうか? 下記スクリプトではカウントダウン終了時に「終了しました」と表示されます。 その「終了しました」にリンクを貼りたいです。 <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>

  • jqueryのscrollfollowが動かない

    jqueryのscrollfollowが他のスクリプトと衝突しているようで動きません。解決方法はありますか? スライドショー用のスクリプトを記述すると、動かなくなります。 スライドショー用の記述を削除すると、scrollfollowはちゃんと機能してくれます。 おそらく、このスライドショーのスクリプトと衝突して動かなくなってるのだと 思いますが、解決方法はあるのでしょうか? どたなか、よろしければお助けください。 以下が、現在のソースです。 (「※」マークのところがそのスクリプトの記述部分です) ----------------------------------------------------------- <!-- JS -->(※ここからがscrollfollowのスクリプトです。) <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery.ui.core.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="jquery.scrollfollow.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('#sidebar1').scrollFollow({ speed: 500, killSwitch: 'sidebar12' }); }); </script> (※ここまでがscrollfollowのスクリプトです。) <script type="text/javascript" src="smoothscroll.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function backToTop() { var x1 = x2 = x3 = 0; var y1 = y2 = y3 = 0; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0; } if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0; } x3 = window.scrollX || 0; y3 = window.scrollY || 0; var x = Math.max(x1, Math.max(x2, x3)); var y = Math.max(y1, Math.max(y2, y3)); window.scrollTo(Math.floor(x / 2), Math.floor(y / 2)); if (x > 0 || y > 0) { window.setTimeout("backToTop()", 25); } } //--> </script> (※画面一番上メインにスライドショーを設置していて、ここからがそのスクリプトです。 下記のスクリプトを削除するとscrollfollowは正常に機能してくれます。記述すると動きません。) <!--スライド--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.panelgallery-2.0.0.js"></script> <script type="text/javascript"> $(function(){ $('.slideshow').panelGallery(); }); </script> (※画面一番上メインにスライドショーを設置していて、ここまでがそのスクリプトです。) ------------------------------------------ 以上です。 よろしくお願いいたします!

  • jQueryでカウントダウンタイマーのループ

    jquery-countdownのタイマーを作っています。 同じ時間を何度も繰り返す タイマーにしたいのですが うまくいきません。 jquery-countdown http://code.google.com/p/jquery-countdown/ demostration http://jquery-countdown.googlecode.com/svn/trunk/index.html このタイマーを ループさせたいと考えています。 15行目の timerEnd: function() { alert('end!!'); }, を変更するかと思いますが どのように変更すれば 何度も繰り返すループになるでしょうか? <html> <head> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script src="http://jquery-countdown.googlecode.com/svn/trunk/js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $('#counter').countdown({ stepTime: 60, format: 'mm:ss', startTime: "00:10", image: 'http://jquery-countdown.googlecode.com/svn/trunk/img/digits.png', digitWidth: 53, digitHeight: 77, timerEnd: function() { alert('end!!'); }, }); }); </script> </head> <body> <div id="counter"></div> </body> </html>

  • JQUERYのいくつかが順番によって機能しなくなり

    JQUERYのいくつかが順番によって機能しなくなります。 干渉を起こしているのかと思うのですが、どうすれば解決できるのでしょうか?var j = jQuery.noConflict();などをやってみましたが、知識不足でうまくいきませんでした。 ・top messageのみ動く。 var j = jQuery.noConflict(); <!--page-scroll--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.page-scroller.js"></script> ・fontsizeとtop messageのみ動く。 <!--script--> <a href="#main" class="gotop"></a> <!--top message--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/message.js"></script> <!--fontsize--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> $(function(){ $("h1+ul a").textresizer({ target: "#contentsrighttop,.copyright,address,div#list div p",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> <!--page-scroll--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.page-scroller.js"></script> <!--script end--> <!--fontsize--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> jQuery(function(){ jQuery("h1+ul a").textresizer({ target: "#contentsrighttop,.copyright,address,div#list div p",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> <!--top message--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/message.js"></script> <!--script end-->

  • 特定のものにだけスクリプトを有効にする

    今晩は。JavaScript初心者です。 今、雪を降らせるスクリプトを作っています。 外部のjsファイルに記述したスクリプトを、特定のidを付けたdivにだけ有効にしたいです。 -----html------------------------------ <html> <head> <script type="text/javascript" src="js/snow.js"></script> </head> <body> <div id="snow"> </div> </body> </html> -----JavaScript(snow.js)------------------------------ sx = new Array(); sy = new Array(); sp = new Array(); num = 50; scrnx = 100; scrny = 500; function snowWrite() { styl = "<img src='snow.gif' style='position:relative;width:6px;height:6px;z-index:3;top:"; for (i=0; i<num; i++) { sx[i] = Math.floor(Math.random()*100); sy[i] = Math.floor(Math.random()*500); sp[i] = Math.floor(Math.random()*5) + 1; document.write(styl+sy[i]+"px;left:"+sx[i]+"px;' name='snow"+i+"'>"); } } function moveSnow() { for (i=0; i<num; i++) { sy[i] += sp[i]; if (sy[i] > scrny) sy[i] = -10; document.images["snow"+i].style.top = sy[i]; } } snowWrite(); 「document.getElementById」あたりかなと思ったのですが、それだとして(まったく見当違いかもしれませんが)、どこにどう記述してよいのかわかりません。 ご存知の方がいらっしゃいましたら、ご教授いただきたいです。 よろしくお願い致します。

専門家に質問してみよう