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

Question

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

我遇到了一个与我的类似的 post，但代码随机生成了数百万个数字。这里是 link 以获得进一步的帮助：

快速示例：

Be the first to know when we launch! We are only giving out 100 coupons and there are only (x) amount left.

Click here to get yours!

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

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>

希望对您有所帮助

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

How to create a persistent random countdown?

javascript

css

html

ticker