Question

基本上，当用户进入我们的网站时，我需要一个慢慢从100-1倒退的计数器。我们只发放“100”免费优惠券，但想要表现出用户正在迅速抓住它们以便创造紧迫感并让潜在客户向我们发送电子邮件。我正在使用Unbounce来托管我们的移动登录页面。

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

快速举例：

成为第一个知道我们何时推出的人！我们只发放100张优惠券，只剩下（x）金额。

点击这里获取你的！

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>

我希望这会有所帮助

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

2 个答案: