douzhanglu4591
2013-03-14 20:54
浏览 93
已采纳

对于hh:mm:ss倒计时使用unix时间戳而不使用jquery

I don't understand why hours of searching have left me empty handed. The situation is this: my site users can set a date and time for an event to begin. That date and time are stored in the db as a timestamp. I want to display a countdown for them. So, I query the db

SELECT TIMESTAMPDIFF(SECOND, NOW(), start) 
FROM events 
WHERE eid = '110';

That returns the number of second remaining until the event is set to begin. All I want is to be able to output, in a span, the number of days, hours, minutes, & seconds.

Here's the javascript I have thus far:

After reading the comments, searching more, and hacking a few things together, this is my updated code:

<span id="countdown-1"><?php echo $timeToEvent; ?></span>

(If there's a more appropriate way to to get my "seconds 'til event" value to the script, please correct me.)

secs = parseInt(document.getElementById('countdown-1').innerHTML,10);
setTimeout("countdown('countdown-1',"+secs+")", 1000);

function countdown(id, timer){
    function pad(num) {
        return num > 9 ? num : '0'+num;
    };
    timer--;
    days = Math.floor( timer / 86400 ),
    hours = Math.floor( timer / 3600 ),
    mins = Math.floor( timer / 60 ),
    secs = Math.floor( timer ),

    dd = days,
    hh = hours - days * 24,
    mm = mins - hours * 60,
    ss = secs - mins * 60;

    clock = dd + ' days ' + pad(hh) + ':' + pad(mm) + ':' + pad(ss) ;

    document.getElementById(id).innerHTML = clock;
    if ( timer > 0 ) {
        setTimeout("countdown('" + id + "'," + timer + ")", 1000);
    } else {
        window.location.reload(true);
    }
}

http://jsfiddle.net/mmJQq/

This code works. However, as I wrote above, I don't know if I ought to be passing the php variable $timeToEvent to the script more directly. It is slightly annoying that the actual number of seconds appears in the span for about 1 second before the javascript changes it to what I want to see. (By the way, I'm not overly concerned about accuracy in this context; I don't mind the time drift.)

图片转代码服务由CSDN问答提供 功能建议

我不明白为什么几小时的搜索让我空手而归。 情况是这样的:我的网站用户 可以设置事件开始的日期和时间。 该日期和时间作为时间戳存储在数据库中。 我想为他们显示一个倒计时。 所以,我查询db

  SELECT TIMESTAMPDIFF(SECOND,NOW(),start)
FROM events 
WHERE eid ='110'; 
   
 
 

返回事件设置为开始之前剩余的秒数。 我想要的是能够在 span 中输出天数,小时数,分钟数和数量。 秒。

这是我到目前为止的javascript:

阅读完评论,搜索更多内容,并将一些东西混合在一起后,这是我的更新代码 :

 &lt; span id =“countdown-1”&gt;&lt;?php echo $ timeToEvent;  ?&gt;&lt; / span&gt; 
   
 
 

(如果有更合适的方法来获取脚本的“秒'直到事件”值,请更正我 。)

  secs = parseInt(document.getElementById('countdown-1')。innerHTML,10); 
setTimeout(“countdown('countdown-1',”+  secs +“)”,1000); 
 
功能倒计时(id,timer){
 function pad(num){
 return num&gt;  9?  num:'0'+ num; 
}; 
 timer  - ; 
 days = Math.floor(timer / 86400),
 hours = Math.floor(timer / 3600),
 mins = Math。 楼层(定时器/ 60),
秒= Math.floor(定时器),
 
 dd =天,
 hh =小时 - 天* 24,
 mm =分钟 - 小时* 60,
 ss =  secs  -  mins * 60; 
 
 clock = dd +'days'+ pad(hh)+':'+ pad(mm)+':'+ pad(ss); 
 
 document.getElementById(id  ).innerHTML = clock; 
 if(timer&gt; 0){
 setTimeout(“countdown('”+ id +“',”+ timer +“)”,1000); 
} else {
 window  .location.reload(true); 
} 
} 
   
 
 

http://jsfiddle.net/mmJQq/

此代码有效。 但是,正如我上面所写,我不知道我是否应该将php变量 $ timeToEvent 更直接地传递给脚本。 稍微恼人的是,在javascript将其更改为我想要查看的内容之前,实际秒数在跨度中出现约1秒。 (顺便说一下,我并不过分担心这种情况下的准确性;我不介意时间漂移。)

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • douji8347 2013-03-14 21:15
    已采纳

    You are never changing diff. Every time the function runs, it's the same value still. Move diff outside the function, then decrement it by 1000 milliseconds (1 second) every time the function runs.

      var
        diff = 3850000; // Move this outside the function so that it can be changed.
                        // If you don't, it will get reset to its original value
                        // every time updateETime runs.
    
    function updateETime() {
    
      function pad(num) {
        return num > 9 ? num : '0'+num;
      };
    
    
        days = Math.floor( diff / (1000*60*60*24) ),
        hours = Math.floor( diff / (1000*60*60) ),
        mins = Math.floor( diff / (1000*60) ),
        secs = Math.floor( diff / 1000 ),
    
        dd = days,
        hh = hours - days * 24,
        mm = mins - hours * 60,
        ss = secs - mins * 60;
    
        document.getElementById("countdown_time")
            .innerHTML =
                dd + ' days ' +
                pad(hh) + ':' + //' hours ' +
                pad(mm) + ':' + //' minutes ' +
                pad(ss) ; //+ ' seconds' ;
    
        diff -= 1000; // Every time the function runs, subtract one second from diff.
    
    }
    setInterval(updateETime, 1000 );
    

    http://jsfiddle.net/ZWrqB/

    As a commenter pointed out, this isn't totally reliable, because setInterval won't reliably fire exactly every one second, so your timer's accuracy will drift away little by little until the page is refreshed. The better way to do it is to store the time to countdown to, then every time the function fires, calculate the offset from the current time and use that offset for the timer display. This SO answer is a good way to do it: https://stackoverflow.com/a/11336046/711902

    点赞 打赏 评论
  • downloadTemp2014 2013-03-14 21:13

    The time is static, because the time is static.

    In your function updateETime(), you display the variable diff, broken down into days, hours, minutes and seconds. But since diff never changes, the display doesn't change as well.

    If you want to show a countdown, you must decrement diff, every time you call updateETime().

    点赞 打赏 评论

相关推荐 更多相似问题