当前位置: 首页 > 面试题库 >

如何倒计时

呼延河
2023-03-14
问题内容

我想知道是否有人可以帮助我。经过数小时的不懈搜索,在这里和网上我似乎找不到使用jquery的简单倒计时。我不想使用任何类型的插件,而只是简单的jquery代码来从日期倒数。我设法在下面找到此代码。但是即使将此代码放置在我的网站中,也不会显示任何内容。我从jquery.com添加了jquery文件,并添加counterID不包含任何内容的正确div
。如果有人可以解释或告诉我如何在采用日期格式并返回倒数的函数中进行简单的倒数,我将不胜感激。

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

问题答案:

作为正常的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>

您的输出显示如下:-

1days 9hrs 3mins 22secs

更新

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

输出将如下所示:-

0days 23hrs 25mins 8secs

1days 23hrs 25mins 8secs



 类似资料:
  • 问题内容: 如何使用Swift 进行倒数计时? 问题答案: 问题1: 问题2: 两者都可以。SpriteKit是用于场景,运动等的SDK。简单视图应用程序是项目模板。他们不应该冲突

  • 怎么停止这个计时器,知道吗? 我想重置计时器在每个查询,但它继续。每个新的查询都会添加新的计时器。这个怎么解决?

  • 介绍 用于实时展示倒计时数值,支持毫秒精度。 引入 import { createApp } from 'vue'; import { CountDown } from 'vant'; const app = createApp(); app.use(CountDown); 代码演示 基础用法 time 属性表示倒计时总时长,单位为毫秒。 <van-count-down :time="time

  • CountDown 倒计时 平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ 基本使用 通过timestamp参数设置倒计时间,单位为秒 <template> <u-count-down :timestamp="timestamp"></u-count-down> </template> <script> export de

  • 我有两个XML EditTexts。在一个EditText中,用户可以将一个数字作为分钟,在另一个EditText中,可以将一个数字作为秒。单击finish按钮后,seconds EditText应开始倒计时,并每秒更新其文本。 此外,我如何保持更新,直到它达到零分钟零秒?

  • 问题内容: 如何使进度条随着时间限制缓慢下降? 问题答案: 抱歉,我仍然找不到真正阅读您的代码的动机,只是根据问题将这个示例组合在一起。看看它是否给您一些想法。 请注意,这是一个SSCCE,总共仅使用40行代码。