Question

好的，所以我无法让这个倒计时运行，我为date-time jquery Date()提供了一个函数，我希望它每秒运行一次，但由于一些奇怪的原因，我会抛出未定义的错误。 *请注意，这是100％动态，页面上可以有1个倒计时或每个用户可以有1000个倒计时。

HTML MARKUP：

    <li class="clu">
    <legend>Clutch # 1</legend>
    <ul class='clutch-des'>
        <li class='it-d'>2012-05-12 23:55:59</li>
        <li class='it'>Remaining: <span class="timeremaining" id="dlvdfovwdfivwsf">
            <span class="hours">03</span>
            <span class="mins">09</span>
            <span class="sec">55</span>
            </span>
        </li>

     </ul>
</li>
<li class="clu">
    <legend>Clutch # 1</legend>
    <ul class='clutch-des'>
        <li class='it-d'>2012-05-12 23:55:59</li>
        <li class='it'>Remaining: <span class="timeremaining" id="dlvdfovwdfivwsf">
            <span class="hours">03</span>
            <span class="mins">09</span>
            <span class="sec">55</span>
            </span>
        </li>

     </ul>
</li>
<li class="clu">
    <legend>Clutch # 2</legend>
    <ul class='clutch-des'>
        <li class='it-d'>2012-05-12 23:55:59</li>
        <li class='it'>Remaining: <span class="timeremaining" id="dlvdfovwdfivwsf">
            <span class="hours">03</span>
            <span class="mins">09</span>
            <span class="sec">55</span>
            </span>
        </li>

     </ul>
</li>
<li class="clu">
    <legend>Clutch # 3</legend>
    <ul class='clutch-des'>
        <li class='it-d'>2012-05-12 23:55:59</li>
        <li class='it'>Remaining: <span class="timeremaining" id="dlvdfovwdfivwsf">
            <span class="hours">03</span>
            <span class="mins">09</span>
            <span class="sec">55</span>
            </span>
        </li>

     </ul>
</li>

JQUERY：

  var a = new Array(); var i = 0;
$('.timeremaining').each(function(index , el){
    var ID = $(this).attr('id');
    // get due date for countdown
    var dd = $(this).parent().parent().children('.it-d').text().split('Due :'); var dd = dd[1];
    var kids = $(this).children();
    $(kids).each(function(){
    a[i] = $(this).attr('class');
    i++;
    });

    Cdtd(x,a[0],a[1],a[2],ID);
});    
function Cdtd(x,hrd,md,sd,ID){

    var dd = new Date(x);
    var now = new Date();
    var dif = dd.getTime() - now.getTime() ;
    if(dif <= 0){
        clearTimeout(CountDown);
        alert('Clutch done!');
    }
    var sec = Math.floor(dif / 1000);
    var min = Math.floor(sec / 60);
    var hr = Math.floor(min / 60);
    var day = Math.floor(hr / 24);
    min %= 60;
    sec %= 60; 
    hr  %= 24;
    $('#'+ID+' '+sd).text (sec+ 'secs');
    $('#'+ID+' '+md).text (min+ 'mins');
    $('#'+ID+' '+hrd).text(hr+  'hrs' );
    var CountDown = setInterval('Cdtd(x,hrd,md,sd)',1000);

}

Answer 1

我终于让您的代码正常运行here, with a few modifications。另外，请记住永远不要对元素使用相同的ID;他们需要各自独特。

Answer 2

试试这个javascript library。他的代码很容易阅读和自定义。

jquery + php倒计时并执行错误

2 个答案: