0

ユーザーがページのさらに下を読み続けると、タイマーが何度も表示される必要がある単一のページがあります。

同じタイマーで、一定時間カウントダウンするだけです。

タイマーは最初のコンテンツ スパンでのみ完全に機能していますが、指定した他のすべての要素では表示されません。

.js ファイル内のコードは次のようになります。

 document.getElementById('minutes').innerHTML = padNums(minutes, 2);
 document.getElementById('seconds').innerHTML = padNums(seconds, 2);
 document.getElementById('milliseconds').innerHTML = padNums(milliseconds, 3);

HTML ファイル内のスクリプト:

 $('.counter').html('<span id="minutes">0</span>' + ':' + '<span id="seconds">0</span>' + ':' + '<span id="milliseconds">0</span>' );

そしてHTML：

  <div class="wrapper">
    <p> There is this much time left: <span class="counter"> </span> </p>
    <p> There is this much time left: <span class="counter"> </span> </p> 
    <p> There is this much time left: <span class="counter"> </span> </p> 
  </div>

..........

.js メソッドを getElementsByClass に変更し、スパンを ID ではなくクラスに変更しようとしました。そして、最初のカウントダウンでさえ機能しなくなりました。

他に何を試すことができますか？

ありがとう

以下から提案されているように、私が試した別のコードセットを次に示します。

HTMLページ内：

 <div class="wrapper">
    <p> There is this much time left: <span class="counter"> </span> </p>
    <p> There is this much time left: <span class="counter"> </span> </p> 
    <p> There is this much time left: <span class="counter"> </span> </p> 
  </div>

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

  $('.counter').html('<span class="minutes">0</span>' + ':' + '<span     
  class="seconds">0</span>' + ':' + '<span class="milliseconds">0</span>' );


  </script>

そして.js内：

 $('.minutes').innerHTML = padNums(minutes, 2);
 $('.seconds').innerHTML = padNums(seconds, 2);
 $('.milliseconds').innerHTML = padNums(milliseconds, 3);

とはいえ...これもうまくいきません。

これを達成する最も簡単な方法は、タイマーごとに一意の ID のセットをさらに作成することですが、これを行うためのよりエレガントな方法が必要です。

4

2 に答える 2

2

ID の代わりにスパン #minutes、#seconds、#milliseconds のクラスを使用してみてください。

次に、3つを交換する必要があります

document.getElementById('minutes') ...

と

$('.minutes') ...

あなたの編集を見たところです。

使用する必要があります

$('.minutes').html('...')

あなたがしたのと同じ方法で

$('.counter').html('...')
于 2012-12-16T07:30:42.597 に答える
0

PHP では、このような状況を処理するためにこのクラスを作成しました。

class IDDateTime {

    static function SecToTime($sec) {
        $days = floor($sec / 86400);
            $sec = $sec - ($days * 86400);
        $hours = floor($sec / 3600);
            $sec = $sec - ($hours * 3600);
        $minutes = floor($sec / 60);
            $sec = $sec - ($minutes * 60);
        $seconds = $sec;

        if($days > 0) $days= $days.' days'; else $days='';
        if ($minutes < 10) $minutes= '0'.$minutes;
        if ($seconds < 10) $seconds= '0'.$seconds;

        return $days.$hours.':'.$minutes.':'.$seconds;
    }

    static function ShowTimer($id,$sec,$href='',$extrasec=false) {
        return '<span id="'.$id.'">'.IDDateTime::SecToTime($sec).'</span><script type="text/javascript">updateTime("'.$id.'",'.($sec + ($extrasec?1:0)).',"'.$href.'");</script>';
    }

    static function AddTimerEngine($text='Done') {
        return '
        <script type="text/javascript">
        function updateTime(elementId,time,rdr) {
            var bt_obj = document.getElementById(elementId); 
            time--;
            var timeToEnd = time; 
            temp = timeToEnd;
            if(temp >= 0) { 
                days = Math.floor(temp / 86400);
                temp = temp % 86400;
                hours = Math.floor(temp / 3600);
                temp = temp % 3600; minutes = Math.floor(temp / 60);
                temp = temp % 60; output = "";
                seconds = temp;                
                if(days > 0) output = days + "days. "; 
                if(seconds < 10) seconds = "0" + seconds; 
                if(minutes < 10) minutes = "0" + minutes; 
                bt_obj.innerHTML = "<b>"+output+hours+":"+minutes+":"+seconds+"</b>"; 
                var jsExp = "updateTime(\'" + elementId + "\'," + time +",\'"+ rdr + "\')";
                setTimeout(jsExp , 1000); 
            } else {
                bt_obj.innerHTML = "'.$text.'";
                if(rdr != \'\') {
                    window.location.href = rdr;
                }
            }
        };
        </script>';
    }

}

それを使用するには、次のようにページに追加するだけです。

Echo IDDateTime::ShowTimer('yout_timer_id',$seconds);
Echo IDDateTime::ShowTimer('another_timer',$seconds);

コードの一部を使用して状況に適応させることも、そのまま使用することもできます。

于 2012-12-16T07:32:00.157 に答える