2012-02-27 22 views
1

なぜカウントダウンタイマーが機能しないのですか?私はkeith woodsプラグインを使用しています。 countdown jqueryをrootにアップロードしました。 http://keith-wood.name/countdownRef.htmlJquery Countdown Timerがロードに失敗する

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<script type="text/javascript" src="jquery.js"></script> 
<link rel="stylesheet" href="jquerycd/jquery.countdown.css" type="text/css" /> 
<script type="text/javascript" src="jquerycd/jquery.countdown.js"></script> 

    <style> 
    defaultCountdown({until: liftoffTime}); 
</style> 

</head> 

<body> 
     <script> 
      var newYear = new Date(); 
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1); 
$('#defaultCountdown').countdown({until: newYear}); 

$('#removeCountdown').toggle(function() { 
     $(this).text('Re-attach'); 
     $('#defaultCountdown').countdown('destroy'); 
    }, 
    function() { 
     $(this).text('Remove'); 
     $('#defaultCountdown').countdown({until: newYear}); 
    } 
); 
<div id="defaultCountdown"></div> 
</script> 
</body> 
</html> 
+0

JavaScriptのエラーが発生していますか?あなたのクロムまたはFirefoxのコンソールを確認してください。 – DG3

+0

@ DG3 Firefoxでエラーがチェックされていません – Jacob

+2

あなたのCSSは関連していません - あなたがそこに置いたjavascriptコマンドです。さらに、スクリプトタグの中にdivがあります。 – Archer

答えて

2

あなたはjQueryのファイルが呼び出された後、プラグインのJSファイルへの呼び出しを含める必要があります。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript" src="jquerycd/jquery.countdown.js"></script> 

これは、プラグインJSファイルが存在することを前提としています。

+0

自分自身のライブラリをアップロードしましたが、上記のようにロードできません – Jacob

+0

あなたの質問をHTMLに更新してください。 404などがないことを確認してください。 – 472084

+0

が更新され、404はありません – Jacob

0

これは私もカウントダウンを追加し、文書の本文にdiv要素を切り替えましたdocument.readyブロックとの完全なコードのちょうど片付けバージョン、($(function() { ... }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Untitled Document</title> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript" src="jquerycd/jquery.countdown.js"></script> 
     <link rel="stylesheet" href="jquerycd/jquery.countdown.css" type="text/css" /> 
     <script> 
      $(function() { 
       var newYear = new Date(); 
       newYear = new Date(newYear.getFullYear() + 1, 0, 1); 
       $('#defaultCountdown').countdown({ until: newYear }); 
       $('#removeCountdown').toggle(function() { 
        $(this).text('Re-attach'); 
        $('#defaultCountdown').countdown('destroy'); 
       }, 
       function() { 
        $(this).text('Remove'); 
        $('#defaultCountdown').countdown({ until: newYear }); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="defaultCountdown"></div> 
     <div id="removeCountdown">Remove</div> 
    </body> 
</html> 

です。

+0

cssがそれに取り組んでいることに感謝します。私のCSSはjquerycd/jquery.countdown.cssにあります。私はどのようにカウントダウン時間にCSSシートをリンクするのですか? – Jacob

+0

あなたが何を求めているのか分かりません。 CSSリンクはページの先頭にあり、jquery/jquery.countdown.cssを指しています。そのcssファイルは実際に存在しますか? – Archer

+0

はい存在します。その中に各要素は.countdown _...で始まります。 – Jacob