如何创建持久的随机倒计时？答案

【问题标题】：How to create a persistent random countdown?如何创建持久的随机倒计时？
【发布时间】：2015-06-01 21:25:46
【问题描述】：

基本上，当用户进入我们的网站时，我需要一个能从 100-1 缓慢倒退的计数器。我们只发放“100”张免费优惠券，但希望给人一种用户正在迅速抓住它们的感觉，以制造紧迫感并让潜在客户给我们他们的电子邮件。我正在使用 Unbounce 托管我们的移动登录页面。

我发现了一个与我的帖子类似的帖子，但代码随机生成了数百万个数字。以下是进一步帮助的链接：https://stackoverflow.com/a/17964971

快速示例：

第一个知道我们何时推出！我们只发放 100 张优惠券，并且只剩下 (x) 个数量。

点击这里获取你的！

【问题讨论】：

您希望计数器在多长时间内达到零？

标签： javascript css html ticker

【解决方案1】：

以 5 秒到 1 秒之间的随机速率倒计时，将当前值保存到浏览器，这样如果用户重新访问该页面，数字不会重置

(Demo)

var i = 100;
var counter = document.getElementById('counter');
if(localStorage.counter) {
    i = localStorage.counter;
}
function countDown() {
    if(i > 0) {
        i--;
        console.log(i);
        counter.innerText = i;
        localStorage.counter = i;
        var timeout = Math.floor(Math.random() * (5000 - 1000)) + 1000;
        setTimeout(function(){
            countDown();
        }, timeout);
    } else {
        document.getElementById('counter-wrp').innerText = 'Oh no, you missed out! All of the coupons are gone.'
    }
}
countDown();

<span id="counter-wrp">Be the first to know when we launch! We are only giving 
out 100 coupons and there are only <span id="counter" style="color: red;"></span> left</span>

【讨论】：

【解决方案2】：

我使用您的示例为您创建了这个jsFiddle

我的方法使用了 localStorage，它非常适合这种类型的功能。您可以在w3schools 阅读更多关于本地存储的信息。您需要保存计数。

您会注意到，要初始化计数器，您需要额外的选项

var counter = new Counter({
    start: 123456789,
    up: '#btnUp',
    down: '#btnDn',
    storageKey: 'count'
});

up: 和down: 只是我使用 id 的 btnUp 和 btnDn 添加的按钮的 jQuery 选择器。 storagekey: 可以是您想要设置的任何字符串，以从本地存储中检索我们的计数。

这是我的按钮

<div class="buttons">
    <button id="btnUp" type="button">+</button>
    <button id="btnDn" type="button">-</button>
</div>

希望对你有帮助

【讨论】：

感谢您提交代码。感谢您的帮助。