Вопрос Вопрос про JS функции

JluceH · 5 Мар 2023

Смотрите создал рулетку в который выпадает приз.
Хочу сделать чтобы можно было открывать раз в 5 минут.
Не подскажите?

Код:

(function() {
    var i = 1;
    var widthel = 263; /*ширина элемента*/
    var prob = 4; /*расстояние между элементами*/
    var nr_el = 21; /*кол. элементов*/

    var caseOpenAudio = new Audio();
    caseOpenAudio.src = "/case/open.wav";
    caseOpenAudio.volume = 0.2;

    var caseCloseAudio = new Audio();
    caseCloseAudio.src = "/case/close.wav";
    caseCloseAudio.volume = 0.2;

    var caseScrollAudio = new Audio();
    caseScrollAudio.src = "/case/scroll.wav";
    caseScrollAudio.volume = 0.2;

    var dubl = $('#case_elements').html();
    $('#case_elements').prepend(dubl);
    $(".case_element").each(function() {
        $(this).addClass("case_element" + i);
        i++;
    })
    $('#case_elements').css('width', 2 * nr_el * (widthel + prob));
    Math.rand = function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function openCase() {
        $('#case_elements').css('margin-left', '0px');
        var el = Math.rand(1, nr_el);
        var min = (el - 1) * (widthel + prob);
        var src = $(".case_element" + el).find("img").attr('src');
        var url = $(".case_element" + el).find(".case-url").html();
        var a = ((nr_el) * (widthel + prob) + (el - 2) * (widthel + prob)); {
            $('#case_elements').animate({
                marginLeft: -1 * Math.rand(a - widthel / 2 + 2, a + widthel / 2 - 2)
            }, {
                duration: 8000,
                easing: 'swing',
                start: function() {
                    caseOpenAudio.play();

                    $('.OpenCaseBtn').text("Открываем...").attr('disabled', 'disabled');
                },
                complete: function() {
                    caseCloseAudio.play();
                    $('.OpenCaseBtn').text("Получить приз!").removeAttr('disabled');

                    $.fancybox({
                        wrapCSS: 'roulette-result',
                        type:'html',
                        content: '<img alt="" src="'+src+'"><a href="' + url + '">Забрать!</a>',
                        afterShow: function () {
                            $('#spin-again').on('click', function() {
                                $.fancybox.close();
                                openCase();
                            });
                        }
                    });
                }
            })
        }

    };

    $('.OpenCaseBtn').click(openCase);
})();

SapDragon · 5 Мар 2023

JluceH написал(а):

Смотрите создал рулетку в который выпадает приз.
Хочу сделать чтобы можно было открывать раз в 5 минут.
Не подскажите?

Код:

(function() {
    var i = 1;
    var widthel = 263; /*ширина элемента*/
    var prob = 4; /*расстояние между элементами*/
    var nr_el = 21; /*кол. элементов*/

    var caseOpenAudio = new Audio();
    caseOpenAudio.src = "/case/open.wav";
    caseOpenAudio.volume = 0.2;

    var caseCloseAudio = new Audio();
    caseCloseAudio.src = "/case/close.wav";
    caseCloseAudio.volume = 0.2;

    var caseScrollAudio = new Audio();
    caseScrollAudio.src = "/case/scroll.wav";
    caseScrollAudio.volume = 0.2;

    var dubl = $('#case_elements').html();
    $('#case_elements').prepend(dubl);
    $(".case_element").each(function() {
        $(this).addClass("case_element" + i);
        i++;
    })
    $('#case_elements').css('width', 2 * nr_el * (widthel + prob));
    Math.rand = function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function openCase() {
        $('#case_elements').css('margin-left', '0px');
        var el = Math.rand(1, nr_el);
        var min = (el - 1) * (widthel + prob);
        var src = $(".case_element" + el).find("img").attr('src');
        var url = $(".case_element" + el).find(".case-url").html();
        var a = ((nr_el) * (widthel + prob) + (el - 2) * (widthel + prob)); {
            $('#case_elements').animate({
                marginLeft: -1 * Math.rand(a - widthel / 2 + 2, a + widthel / 2 - 2)
            }, {
                duration: 8000,
                easing: 'swing',
                start: function() {
                    caseOpenAudio.play();

                    $('.OpenCaseBtn').text("Открываем...").attr('disabled', 'disabled');
                },
                complete: function() {
                    caseCloseAudio.play();
                    $('.OpenCaseBtn').text("Получить приз!").removeAttr('disabled');

                    $.fancybox({
                        wrapCSS: 'roulette-result',
                        type:'html',
                        content: '<img alt="" src="'+src+'"><a href="' + url + '">Забрать!</a>',
                        afterShow: function () {
                            $('#spin-again').on('click', function() {
                                $.fancybox.close();
                                openCase();
                            });
                        }
                    });
                }
            })
        }

    };

    $('.OpenCaseBtn').click(openCase);
})();

Храни когда последний раз был открыт кейс в куки

takelocheshka445 · 5 Мар 2023

Пожалуйста, зарегистрируйтесь или авторизуйтесь, чтобы увидеть содержимое.

JluceH · 6 Мар 2023

takelocheshka445 написал(а):
Скрытое содержимое

Можете в телеграмм зайти. А так код работает 50/50 чуть-чуть какие-то замашки хочу вам вопросов задать.

pasculetmihai · 6 Мар 2023

JluceH написал(а):

Смотрите создал рулетку в который выпадает приз.
Хочу сделать чтобы можно было открывать раз в 5 минут.
Не подскажите?

Код:

(function() {
    var i = 1;
    var widthel = 263; /*ширина элемента*/
    var prob = 4; /*расстояние между элементами*/
    var nr_el = 21; /*кол. элементов*/

    var caseOpenAudio = new Audio();
    caseOpenAudio.src = "/case/open.wav";
    caseOpenAudio.volume = 0.2;

    var caseCloseAudio = new Audio();
    caseCloseAudio.src = "/case/close.wav";
    caseCloseAudio.volume = 0.2;

    var caseScrollAudio = new Audio();
    caseScrollAudio.src = "/case/scroll.wav";
    caseScrollAudio.volume = 0.2;

    var dubl = $('#case_elements').html();
    $('#case_elements').prepend(dubl);
    $(".case_element").each(function() {
        $(this).addClass("case_element" + i);
        i++;
    })
    $('#case_elements').css('width', 2 * nr_el * (widthel + prob));
    Math.rand = function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function openCase() {
        $('#case_elements').css('margin-left', '0px');
        var el = Math.rand(1, nr_el);
        var min = (el - 1) * (widthel + prob);
        var src = $(".case_element" + el).find("img").attr('src');
        var url = $(".case_element" + el).find(".case-url").html();
        var a = ((nr_el) * (widthel + prob) + (el - 2) * (widthel + prob)); {
            $('#case_elements').animate({
                marginLeft: -1 * Math.rand(a - widthel / 2 + 2, a + widthel / 2 - 2)
            }, {
                duration: 8000,
                easing: 'swing',
                start: function() {
                    caseOpenAudio.play();

                    $('.OpenCaseBtn').text("Открываем...").attr('disabled', 'disabled');
                },
                complete: function() {
                    caseCloseAudio.play();
                    $('.OpenCaseBtn').text("Получить приз!").removeAttr('disabled');

                    $.fancybox({
                        wrapCSS: 'roulette-result',
                        type:'html',
                        content: '<img alt="" src="'+src+'"><a href="' + url + '">Забрать!</a>',
                        afterShow: function () {
                            $('#spin-again').on('click', function() {
                                $.fancybox.close();
                                openCase();
                            });
                        }
                    });
                }
            })
        }

    };

    $('.OpenCaseBtn').click(openCase);
})();

Для ограничения открытия рулетки каждые 5 минут, можно использовать функцию setTimeout, которая задержит выполнение открытия рулетки на заданное время. Например, вот так:

Код:

(function() {
var i = 1;
var widthel = 263; /*ширина элемента*/
var prob = 4; /*расстояние между элементами*/
var nr_el = 21; /*кол. элементов*/
var canOpen = true; /*флаг, указывающий, можно ли открывать рулетку*/

var caseOpenAudio = new Audio();
caseOpenAudio.src = "/case/open.wav";
caseOpenAudio.volume = 0.2;

var caseCloseAudio = new Audio();
caseCloseAudio.src = "/case/close.wav";
caseCloseAudio.volume = 0.2;

var caseScrollAudio = new Audio();
caseScrollAudio.src = "/case/scroll.wav";
caseScrollAudio.volume = 0.2;

var dubl = $('#case_elements').html();
$('#case_elements').prepend(dubl);
$(".case_element").each(function() {
    $(this).addClass("case_element" + i);
    i++;
})
$('#case_elements').css('width', 2 * nr_el * (widthel + prob));
Math.rand = function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function openCase() {
    if (!canOpen) { /*если нельзя открывать рулетку, выходим из функции*/
        return;
    }
    canOpen = false; /*устанавливаем флаг, запрещающий открывать рулетку*/
    $('#case_elements').css('margin-left', '0px');
    var el = Math.rand(1, nr_el);
    var min = (el - 1) * (widthel + prob);
    var src = $(".case_element" + el).find("img").attr('src');
    var url = $(".case_element" + el).find(".case-url").html();
    var a = ((nr_el) * (widthel + prob) + (el - 2) * (widthel + prob)); {
        $('#case_elements').animate({
            marginLeft: -1 * Math.rand(a - widthel / 2 + 2, a + widthel / 2 - 2)
        }, {
            duration: 8000,
            easing: 'swing',
            start: function() {
                caseOpenAudio.play();

                $('.OpenCaseBtn').text("Открываем...").attr('disabled', 'disabled');
            },
            complete: function() {
                caseCloseAudio.play();
                $('.OpenCaseBtn').text("Получить приз!").removeAttr('disabled');
                canOpen = true; /*устанавливаем флаг, разрешающий открывать рулетку*/
                $.fancybox({
                    wrapCSS: 'roulette-result',
                    type:'html',
                    content: '<img alt="" src="'+src+'"><a href="' + url + '">Забрать!</a>',
                    afterShow: function () {
                        $('#spin-again').on('click', function() {
                            $.fancybox.close();
                            openCase();
                        });
                    }

chrshnv · 6 Мар 2023

jQuery

pasculetmihai · 6 Мар 2023

Пожалуйста, зарегистрируйтесь или авторизуйтесь, чтобы увидеть содержимое.

takelocheshka445 · 6 Мар 2023

Пожалуйста, зарегистрируйтесь или авторизуйтесь, чтобы увидеть содержимое.

JluceH · 7 Мар 2023

takelocheshka445 написал(а):
Скрытое содержимое
Скрытое содержимое

Сделал как вы сказали все точно также, на local он работает получается но не пишет сколько осталось до нового открытия.
А на хостинге так вообще не работает и все так же крутиться без ограничения.

Код:

(function() {
    var canOpen = true;
    var openInterval = setInterval(function() {
        canOpen = true;
      }, 5 * 60 * 1000); // интервал в 5 минут
    var i = 1;
    var widthel = 263; /*ширина элемента*/
    var prob = 4; /*расстояние между элементами*/
    var nr_el = 21; /*кол. элементов*/

    var caseOpenAudio = new Audio();
    caseOpenAudio.src = "/case/open.wav";
    caseOpenAudio.volume = 0.2;

    var caseCloseAudio = new Audio();
    caseCloseAudio.src = "/case/close.wav";
    caseCloseAudio.volume = 0.2;

    var caseScrollAudio = new Audio();
    caseScrollAudio.src = "/case/scroll.wav";
    caseScrollAudio.volume = 0.2;

    var dubl = $('#case_elements').html();
    $('#case_elements').prepend(dubl);
    $(".case_element").each(function() {
        $(this).addClass("case_element" + i);
        i++;
    })
    $('#case_elements').css('width', 2 * nr_el * (widthel + prob));
    Math.rand = function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function getCookie(name) {
  var value = '; ' + document.cookie;
  var parts = value.split('; ' + name + '=');
  if (parts.length == 2) return parts.pop().split(';').shift();
}

function setCookie(name, value, options = {}) {
  options = {
    path: '/',
    ...options
  };

  if (options.expires instanceof Date) {
    options.expires = options.expires.toUTCString();
  }

  var updatedCookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

  for (var optionKey in options) {
    updatedCookie += '; ' + optionKey;
    var optionValue = options[optionKey];
    if (optionValue !== true) {
      updatedCookie += '=' + optionValue;
    }
  }

  document.cookie = updatedCookie;
}
    function openCase() {
        localStorage.setItem('canOpen', canOpen);
        var canOpen = localStorage.getItem('canOpen') === 'true';       
        var lastOpened = getCookie('lastOpened');
        var now = new Date().getTime();
        if (lastOpened && now - lastOpened < 5 * 60 * 1000) {     // рулетка не может быть открыта, так как не прошло 5 минут
           return;
        }
        setCookie('lastOpened', now, { expires: 1 }); // сохраняем текущее время в куках на 1 день
        if (!canOpen) {
           return;
          }
             canOpen = false;
        $('#case_elements').css('margin-left', '0px');
        var el = Math.rand(1, nr_el);
        var min = (el - 1) * (widthel + prob);
        var src = $(".case_element" + el).find("img").attr('src');
        var url = $(".case_element" + el).find(".case-url").html();
        var a = ((nr_el) * (widthel + prob) + (el - 2) * (widthel + prob)); {
            $('#case_elements').animate({
                marginLeft: -1 * Math.rand(a - widthel / 2 + 2, a + widthel / 2 - 2)
            }, {
                duration: 8000,
                easing: 'swing',
                start: function() {
                    caseOpenAudio.play();

                    $('.OpenCaseBtn').text("Открываем...").attr('disabled', 'disabled');
                },
                complete: function() {
                    caseCloseAudio.play();
                    $('.OpenCaseBtn').text("Получить приз!").removeAttr('disabled');

                    $.fancybox({
                        wrapCSS: 'roulette-result',
                        type:'html',
                        content: '<img alt="" src="'+src+'"><a href="' + url + '">Забрать!</a>',
                        afterShow: function () {
                            $('#spin-again').on('click', function() {
                                $.fancybox.close();
                                openCase();
                            });
                        }
                    });
                }
            })
        }

    };

    $('.OpenCaseBtn').click(openCase);
})();

takelocheshka445 · 7 Мар 2023

Пожалуйста, зарегистрируйтесь или авторизуйтесь, чтобы увидеть содержимое.

ijsaH · 3 Апр 2023

Пожалуйста, зарегистрируйтесь или авторизуйтесь, чтобы увидеть содержимое.

Morphling · 3 Апр 2023

SapDragon написал(а):
Храни когда последний раз был открыт кейс в куки

Гений, куки можно стереть

SapDragon · 3 Апр 2023

Morphling написал(а):
Гений, куки можно стереть

и что

Morphling · 3 Апр 2023

SapDragon написал(а):
и что

Всмысле что? Он сказал записывать в куки кд открытия, удалил куки -> открываешь без кд

SapDragon · 3 Апр 2023

Morphling написал(а):
Всмысле что? Он сказал записывать в куки кд открытия, удалил куки -> открываешь без кд

Ты предлагаешь ему прикрутить к такому простому приложению бэкенд с авторизацией/регистрацией, и сессиями?

typescript · 3 Апр 2023

SapDragon написал(а):
Ты предлагаешь ему прикрутить к такому простому приложению бэкенд с авторизацией/регистрацией, и сессиями?

Да.
а так может юзать реакт или вуе + стейты или редукс

SapDragon · 3 Апр 2023

typescript написал(а):
Да.
а так может юзать реакт или вуе + стейты или редукс

Время рекомндовать огромные фреймворки когда ТС JS только изучает