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

How to create a persistent random countdown?

本文关键字：随机 倒计时 一个 何创建 创建      更新时间：2023-09-26

基本上，当用户进入我们的网站时，我需要一个计数器，从100-1慢慢地向后走。我们只给"100";免费优惠券，但要给的外观，用户正在迅速抓住他们，以创造紧迫性，并有前景给我们的电子邮件。我正在使用Unbounce来承载我们的手机登陆页面。

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

快速的例子:

要第一个知道我们什么时候发布!我们只发100张优惠券，只剩下x张了。

点击这里获取你的!

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

我用你的例子为你创建了这个jsFiddle

我的方法使用localStorage，这对于这种类型的函数来说是完美的。您可以在3schools阅读更多关于本地存储的内容。你需要保存这个计数

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

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

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

这是我的按钮

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

希望对大家有所帮助

相关文章：