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

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

  SELECT TIMESTAMPDIFF(SECOND,NOW(),start)
FROM events
WHERE eid ='110';
</ code> </ pre>

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

这是我到目前为止的javascript:</ p>

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

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

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

  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);
}
}
</ code> </ pre>

http://jsfiddle.net/mmJQq/ </ p>

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

展开原文

原文

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

duanlei7101
duanlei7101 你应该做setInterval(function(){updateTime();},1000);
7 年多之前 回复
duanming0494
duanming0494 你使用diff=<?phpecho$timeToEvent;?>,在函数内,所以每次调用函数时,都会重置为该时间。您需要单独的功能来设置/倒计时。
7 年多之前 回复
dtv995719
dtv995719 最好从数据库中检索实际的事件开始时间,并在更新代码的每次迭代中执行“剩余时间”计算。
7 年多之前 回复

2个回答



您永远不会更改 diff </ code>。 每次运行该函数时,它仍然是相同的值。 将 diff </ code>移到函数外部,然后在每次函数运行时将其递减1000毫秒(1秒)。</ p>

  var 
diff = 3850000; //将它移到函数外部,以便可以更改它。
//如果不这样,它将在每次updateETime运行时重置为原始值
// n。
函数updateETime(){\ n
功能键(num){
return num&gt; 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 - 天* 24,
mm =分钟 - 小时* 60,
ss =秒 - 分钟* 60;

document.getElementById(“countdown_time”)
.innerHTML =
dd +'days'+ \ n pad(hh)+':'+''hours'+
pad(mm)+':'+ //'minutes'+
pad(ss); // +'秒';

diff - = 1000; //每次函数运行时,从diff中减去一秒。

}
setInterval(updateETime,1000);
</ code> </ pre>

http://jsfiddle.net/ZWrqB/ </ p>

正如评论者指出的那样,这不是 完全可靠,因为 setInterval </ code>每隔一秒就不能可靠地 </ em>,所以你的计时器的准确性会逐渐消失,直到刷新页面为止。 更好的方法是将时间存储到倒计时,然后每次函数触发时,计算当前时间的偏移量并将该偏移量用于计时器显示。 这个答案是一个很好的方法: https://stackoverflow.com/a/11336046/711902 </ p>
</ div>

展开原文

原文

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

dtnpf35197
dtnpf35197 谢谢你指出我头脑掠过的简单事情。
7 年多之前 回复
dongwupei7803
dongwupei7803 确实如此。 我想保持它与OP的原始尝试相似,这样他就可以很容易地说出出了什么问题。 我应该添加更多,以帮助他更好地解决问题。
7 年多之前 回复
dongtong5242
dongtong5242 “然后减去1000毫秒”没有。 实际上我喜欢你的ops问题的例子。 间隔永远不会发生在1000秒内(因此你不能依赖它)。 通过'将来的点' - '现在'(新日期)计算你的差异。
7 年多之前 回复



时间是静态的,因为时间是静态的。</ p>

在函数中 updateETime()</ code>,显示变量 diff </ code>,细分为天,小时,分钟和秒。 但由于 diff </ code>永远不会改变,显示也不会改变。</ p>

如果要显示倒计时,则必须减少 diff </ 代码>,每次调用 updateETime()</ code>。</ p>
</ div>

展开原文

原文

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().

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐