Javascript JQuery倒数计时器答案

【问题标题】：Javascript JQuery countdown timerJavascript JQuery倒数计时器
【发布时间】：2013-03-14 14:44:44
【问题描述】：

我正在尝试为日期/时间创建一个简单的倒数计时器。

我目前只有以下几天可以运行脚本：

<div id="countdown">

today = new Date();
BigDay = new Date("March 29, 2013");
msPerDay = 24 * 60 * 60 * 1000 ;
timeLeft = (BigDay.getTime() - today.getTime());
e_daysLeft = timeLeft / msPerDay;
daysLeft = Math.floor(e_daysLeft);
document.write(daysLeft + " days to go!");

</div>

我现在正在尝试创建一个完整的倒计时计时器（包含小时、分钟和秒）并创建了以下脚本。 html 未显示在页面上。

var today = new Date();
var BigDay = new Date("29 03 2013, 14:30:00");
var msPerDay = 24 * 60 * 60 * 1000 ;
var timeLeft = (BigDay.getTime() - today.getTime());
var e_daysLeft = timeLeft / msPerDay;
var daysLeft = Math.floor(e_daysLeft);
var e_hrsLeft = (e_daysLeft - daysLeft)*24;
var hrsLeft = Math.floor(e_hrsLeft);
var e_minsLeft = (e_hrsLeft - hrsLeft)*60;
var minsLeft = Math.floor(e_minsLeft);
var e_secsLeft = (e_minsLeft - minsLeft)*1000;
var secsLeft = Math.floor(e_secsLeft);
var timeString = daysLeft + " : " + hrsLeft + " : " + minsLeft + " : " + secsLeft;

$('document').ready(function(){

window.setInterval(function(){
$('#countdown').html(timeString);
}, 1000);

});

我不确定问题可能是什么。第一个脚本包含在 html 中，第二个是外部 js 文件。

编辑：html 现在显示，但是所有值都显示为 NaN。

【问题讨论】：

顺便说一句，在 var minsLeft = Math.floor((e_minsLeft); 中有一个额外的左括号，你的控制台说什么？
改进了它。它现在显示在 html 中，但每个值都显示为 NaN。

标签： jquery html countdowntimer

【解决方案1】：

除了提到的语法错误之外，还有逻辑错误，您需要在超时函数中计算剩余时间字符串，否则这些值仅在页面加载时计算。

$(function(){
    var BigDay = new Date("29 Mar 2013, 14:30:00");
    var msPerDay = 24 * 60 * 60 * 1000 ;


    window.setInterval(function(){
        var today = new Date();
        var timeLeft = (BigDay.getTime() - today.getTime());

        var e_daysLeft = timeLeft / msPerDay;
        var daysLeft = Math.floor(e_daysLeft);

        var e_hrsLeft = (e_daysLeft - daysLeft)*24;
        var hrsLeft = Math.floor(e_hrsLeft);

        var e_minsLeft = (e_hrsLeft - hrsLeft)*60;
        var minsLeft = Math.floor(e_minsLeft);

        var e_secsLeft = (e_minsLeft - minsLeft)*60;
        var secsLeft = Math.floor(e_secsLeft);


        var timeString = daysLeft + " : " + hrsLeft + " : " + minsLeft + " : " + secsLeft;
        $('#countdown').html(timeString);
    }, 1000);
})

演示：Fiddle

【讨论】：

秒计算还有一个问题，你用的是(e_minsLeft - minsLeft)*1000其实应该是(e_minsLeft - minsLeft)*60
我实际上在发布后就看到了最后一个错误但忘记编辑了。
愿上帝保佑你 Arun Johny。
@ArunPJohny 如果我想将 BigDay 作为 php 字符串传递，它不起作用；试过这个：jsfiddle.net/85CNW，但没用，我做错了什么？非常感谢！
@ArunPJohny 有什么建议吗？

【解决方案2】：

这里有错误：var minsLeft = Math.floor((e_minsLeft);

第一个括号没有闭合，应该是var minsLeft = Math.floor(e_minsLeft);

【讨论】：

【解决方案3】：

因为您没有每秒运行 timeString 计算，所以 #countdown div 中的文本永远不会改变

【讨论】：

所以整个函数需要在setInterval之内？