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

尝试使用跨度#minutes、#seconds 和#milliseconds 的类而不是ID。

然后，您将不得不更换三个

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 回答