Как создать постоянный случайный обратный отсчет?

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: просто JQuery селекторы для кнопок, которые я добавил с btnUp ID и btnDn. storagekey: может быть любой строкой, которую вы хотите установить, чтобы получить наш счет из localstorage.

вот мои кнопки

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

Я надеюсь, что это помогает