javascript - 如何让我的倒计时器在每次刷新 JavaScript 时停止重新开始

标签 javascript

大家好,感谢您抽出宝贵的时间,抱歉我是个新人。 所以我在我的 html 工作中有这个 JavaScript 文件,它应该是一个倒计时(一种计时器)。 我希望它是(剩下的时间到 6 月 3 日),但我总是得到相同的结果或根本没有结果。每次我刷新浏览器时,计数器都会重新启动。我一直在 YouTube 上观看视频,试图找到一种方法来改变这一点,但情况只会变得更糟。我也在这里寻找其他问题,但答案总是不同的代码我想知道我是否可以修改这个代码来做到这一点 请不要对我太严厉,我只有 32 分,我不想失去投票权和否决权 ,这是代码,提前致谢。

<html>
<body>
    <head>
    </head>
        <div id="countdown">
            <div id='tiles'></div>
                <div class="labels">
                    <li>Days</li>
                    <li>Hours</li>
                    <li>Mins</li>
                    <li>Secs</li>
                </div>
        </div>
    </div>

        <script>/*---------------Getcountdown------------------*/ 
        var target_date = new Date().getTime() + (1000*3600*772); // set the 
        countdown date
        var days, hours, minutes, seconds; // variables for time units

        var countdown = document.getElementById("tiles"); // get tag element

        getCountdown();

        setInterval(function () { getCountdown(); }, 1000);

        function getCountdown(){

            // find the amount of "seconds" between now and target
            var current_date = new Date().getTime();
            var seconds_left = (target_date - current_date) / 1000;

            days = pad( parseInt(seconds_left / 86400) );
            seconds_left = seconds_left % 86400;

            hours = pad( parseInt(seconds_left / 3600) );
            seconds_left = seconds_left % 3600;

            minutes = pad( parseInt(seconds_left / 60) );
            seconds = pad( parseInt( seconds_left % 60 ) );

            // format countdown string + set tag value
            countdown.innerHTML = "<span>" + days + "</span><span>" + hours 
       + "</span><span>" + minutes + "</span><span>" + seconds + "</span>"; 
        }

        function pad(n) {
            return (n < 10 ? '0' : '') + n;
        }
    </script>
    </body>
</html>

最佳答案

每当页面加载时,您倒计时的日期总是会递增,因为它被初始化为当前时间加上偏移量:

var target_date = new Date().getTime() + (1000*3600*772)

使用绝对日期而不是相对时间:

var target_date = new Date('June 3 2018');
// or
var target_date = new Date(2018, 6, 3);

关于javascript - 如何让我的倒计时器在每次刷新 JavaScript 时停止重新开始,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50081729/

相关文章:

javascript - onError 事件未按预期运行

javascript - XML用双引号存储文本数据,JavaScript在检索数据时崩溃

javascript - 部署 Cloud Functions for Firebase 是否需要节点

javascript - 安装和升级基于 Firefox Add-on-SDK 的扩展时强制重新启动

javascript - 如何使用 selenium webdriver 查找网页/表格中的重复文本/记录?

javascript - 未知数量的 promise 取决于先前 promise 的结果?

javascript - Node.js Knex SQL 插入太慢

javascript - jQuery 和动态选项卡和数据

javascript - Angular Charts.js : Can't refresh chart with data

javascript - 性能 - String.charAt(0) 与/^.{1}/