如何创建一个持续的随机倒计时？

Question

基本上，我需要一个计数器，将返回从100-1慢慢用户进入我们的网站。我们只发放"100“免费优惠券，但希望给出的外观，用户正在迅速抓住他们，以创造紧急和有前景给我们他们的电子邮件。我正在使用取消弹托管我们的移动登陆页面。

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

简单的例子：

第一个知道我们什么时候发射！我们只发放100张优惠券，只剩下(x)笔钱。 点击这里得到你的！

Answer 1

以5秒到1秒的随机速度向下数，将当前保存到浏览器，这样如果用户重新访问页面，号码就不会重置。

(演示)

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>

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

我希望这能帮到你