0

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

HTML 标记：

    <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>
​

查询：

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

}
​
4

2 回答 2

1

我终于让你的代码在这里工作了，做了一些修改。另外，请记住不要对元素使用相同的 ID；他们需要每个都是独一无二的。

于 2012-05-13T07:15:59.407 回答
0

试试这个javascript 库。他的代码易于阅读和自定义。

于 2012-05-13T06:03:08.400 回答