Question

我有一个页面，我需要一个计时器一次又一次地显示，因为用户继续向下读取页面。

它是相同的计时器，只是在一段时间内倒计时。

我的计时器只在第一个内容范围内完美运行，但它不会显示在我指定的所有其他元素中。

以下是.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，但我想要一种更优雅的方法。

Answer 1

尝试使用跨越#minutes，＃else和#milliseconds的类而不是ID。

然后你必须更换三个

document.getElementById('minutes') ...

与

$('.minutes') ...

刚看到你的编辑。

您需要使用

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

与

的方式相同

$('.counter').html('...')

Answer 2

对于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);

您可以使用代码的某些部分并根据您的具体情况进行调整，或按原样使用。

试图让多个计时器在单页上工作

2 个答案: