Javascript 如何为约会倒计时

我想知道是否有人能帮我。在这里和网上不知疲倦地搜索了几个小时之后，我似乎找不到使用jquery的简单倒计时。我不想使用任何类型的插件，只想使用一个简单的jquery代码从日期开始倒计时。我在下面找到了这个代码。但即使将此代码放在我的网站上，也不会显示任何内容。我从jquery.com添加了jquery文件，并添加了正确的div，其中包含

counter

ID，没有任何内容。如果有人能解释或告诉我如何在一个函数中进行简单的倒计时，该函数采用日期格式并返回倒计时，我将非常感谢您的帮助

var end = new Date('02/19/2012 10:1 AM');

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById('countdown').innerHTML = days + 'days ';
        document.getElementById('countdown').innerHTML += hours + 'hrs ';
        document.getElementById('countdown').innerHTML += minutes + 'mins ';
        document.getElementById('countdown').innerHTML += seconds + 'secs';
    }

    timer = setInterval(showRemaining, 1000);

var end=新日期（'2012年2月19日上午10:1'）；
var_秒=1000；
var _minute=_second*60；
变量(小时)=(分钟)*60 ;；
var _日=_小时*24；
无功定时器；
函数showLeving（）{
var now=新日期（）；
var距离=结束-现在；
如果（距离<0）{
清除间隔（计时器）；
document.getElementById（'countdown'）。innerHTML='EXPIRED！'；
返回；
}
var天数=数学楼层（距离/天数）；
var小时=数学楼层（（距离%\u天）/\u小时）；
var分钟=数学楼层（距离%\u小时）/\u分钟）；
var秒=数学楼层（（距离%\u分钟）/\u秒）；
document.getElementById（'countdown'）.innerHTML=days+'days'；
document.getElementById（'countdown'）.innerHTML+=hours+'hrs'；
document.getElementById（'countdown'）.innerHTML+=minutes+'mins'；
document.getElementById（'countdown'）.innerHTML+=seconds+'secs'；
}
定时器=设置间隔（显示剩余，1000）；

这不是jQuery，而是JavaScript。但是无论如何

你差点就成功了。唯一的问题是

var distance=end now。应该是：

var distance = end.getTime()-now.getTime();

另外，您不应该在
innerHTML
上使用
+=
。相反，使用一个变量（例如：
var output=”“
）并添加到该变量中，然后将其分配给末尾的
innerHTML

最后，再次检查
div
的ID是否与您在
getElementById
中拥有的ID匹配这与普通javascript一样工作正常

<script>
var end = new Date('02/19/2012 10:1 AM');

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
        var now = new Date();
        var distance = end - now;
        if (distance < 0) {

            clearInterval(timer);
            document.getElementById('countdown').innerHTML = 'EXPIRED!';

            return;
        }
        var days = Math.floor(distance / _day);
        var hours = Math.floor((distance % _day) / _hour);
        var minutes = Math.floor((distance % _hour) / _minute);
        var seconds = Math.floor((distance % _minute) / _second);

        document.getElementById('countdown').innerHTML = days + 'days ';
        document.getElementById('countdown').innerHTML += hours + 'hrs ';
        document.getElementById('countdown').innerHTML += minutes + 'mins ';
        document.getElementById('countdown').innerHTML += seconds + 'secs';
    }

    timer = setInterval(showRemaining, 1000);
</script>
<div id="countdown"></div>


var end=新日期（'2012年2月19日上午10:1'）；
var_秒=1000；
var _minute=_second*60；
变量(小时)=(分钟)*60 ;；
var _日=_小时*24；
无功定时器；
函数showLeving（）{
var now=新日期（）；
var距离=结束-现在；
如果（距离<0）{
清除间隔（计时器）；
document.getElementById（'countdown'）。innerHTML='EXPIRED！'；
返回；
}
var天数=数学楼层（距离/天数）；
var小时=数学楼层（（距离%\u天）/\u小时）；
var分钟=数学楼层（距离%\u小时）/\u分钟）；
var秒=数学楼层（（距离%\u分钟）/\u秒）；
document.getElementById（'countdown'）.innerHTML=days+'days'；
document.getElementById（'countdown'）.innerHTML+=hours+'hrs'；
document.getElementById（'countdown'）.innerHTML+=minutes+'mins'；
document.getElementById（'countdown'）.innerHTML+=seconds+'secs'；
}
定时器=设置间隔（显示剩余，1000）；

您的输出如下所示：-

1天9小时3分钟22秒


更新
使用函数：

倒计时（“2012年2月19日上午10:1”，“倒计时”）；
倒计时（“2012年2月20日上午10:1”，“新倒计时”）；
功能倒计时（dt，id）
{
var结束=新日期（dt）；
var_秒=1000；
var _minute=_second*60；
变量(小时)=(分钟)*60 ;；
var _日=_小时*24；
无功定时器；
函数showLeving（）{
var now=新日期（）；
var距离=结束-现在；
如果（距离<0）{
清除间隔（计时器）；
document.getElementById（id）.innerHTML='EXPIRED！'；
返回；
}
var天数=数学楼层（距离/天数）；
var小时=数学楼层（（距离%\u天）/\u小时）；
var分钟=数学楼层（距离%\u小时）/\u分钟）；
var秒=数学楼层（（距离%\u分钟）/\u秒）；
document.getElementById（id）.innerHTML=days+'days'；
document.getElementById（id）.innerHTML+=hours+'hrs'；
document.getElementById（id）.innerHTML+=minutes+'mins'；
document.getElementById（id）.innerHTML+=seconds+'secs'；
}
定时器=设置间隔（显示剩余，1000）；
}

输出将显示如下：-

0天23小时25分钟8秒
1天23小时25分钟8秒为了这篇文章的新读者，这里是我的贡献

我使用的是
setTimeout
而不是
setInterval
，这样我们就可以在目标日期仍在倒计时时轻松更新目标日期。我还将包括目标日的时间，以提高精度，时间将是本地的。所以我想这涵盖了大多数可能的需求


函数刷新计时器（）{
函数倒计时（）{
setTimeout（函数（现在）{
var dif=（现在的td）/1000，
ss=Math.floor（dif%60）.toString（）.padStart（2，“0”），
ms=数学地板（dif/60%60）.toString（）.padStart（2，“0”），
hs=数学地板（dif/3600%24）.toString（）.padStart（2，“0”），
ds=数学地板（dif/86400）.toString（）.padStart（3，“0”）；
remainingTime.textContent=dif>0？`${ds}天${hs}:${ms}:${ss}`
：“对不起，你已经迟到了……”；
活动&倒计时（）；
this.removeEventListener（“change”，kill）；//可能是多余的
}，1000，Date.now（））；
}
var td=新日期（此.value），
活动=真，
kill=\=>active=false；
本附录中添加了列表器（“更改”，kill）；
倒计时(
<script>

    CountDownTimer('02/19/2012 10:1 AM', 'countdown');
    CountDownTimer('02/20/2012 10:1 AM', 'newcountdown');

    function CountDownTimer(dt, id)
    {
        var end = new Date(dt);

        var _second = 1000;
        var _minute = _second * 60;
        var _hour = _minute * 60;
        var _day = _hour * 24;
        var timer;

        function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {

                clearInterval(timer);
                document.getElementById(id).innerHTML = 'EXPIRED!';

                return;
            }
            var days = Math.floor(distance / _day);
            var hours = Math.floor((distance % _day) / _hour);
            var minutes = Math.floor((distance % _hour) / _minute);
            var seconds = Math.floor((distance % _minute) / _second);

            document.getElementById(id).innerHTML = days + 'days ';
            document.getElementById(id).innerHTML += hours + 'hrs ';
            document.getElementById(id).innerHTML += minutes + 'mins ';
            document.getElementById(id).innerHTML += seconds + 'secs';
        }

        timer = setInterval(showRemaining, 1000);
    }

</script>
<div id="countdown"></div>
<div id="newcountdown"></div>