Форум

mxup · #1 (**permalink**) 04.10.2017, 19:36

Здравствуйте, на сайте имеется кнопка для того, чтобы при регистрации запросить СМС на телефон.
Так вот, хочу сделать, чтобы был какой то интервал между запросами СМС. Для этого думаю сделать, чтобы кнопка деактивировалась (то есть на неё нельзя было нажать) на 3 минуты и рядом появлялся таймер с обратным отсчётом.
Помогите плиз как это сделать средствами JavaScript
Код кнопки:

Код:

<input id="send_sms" name="send_sms" type="button" value="Получить код в СМС">

рони · #2 (**permalink**) 04.10.2017, 20:14

mxup,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
$(function() {
    $.fn.Timer = function Timer(obj) {
        var def = {
            from: 5E3,
            duration: 5E3,
            to: 0,
            callback: null,
            step: function(now, fx) {
                $(fx.elem).html(now | 0)
            }
        };
        var opt = $.extend({}, def, obj);
        return this.each(function(indx, el) {
            $(el).queue(function() {
                el.n = opt.from;
                $(el).dequeue()
            });
            $(el).animate({
                n: opt.to
            }, {
                easing: "linear",
                duration: opt.duration,
                step: opt.step,
                complete: opt.callback
            })
        })
    };
    var end = +localStorage.getItem("end")||0, duration = 180 * 1E3;
    $("#send_sms").on("click", function (event) {
    var time = (new Date).getTime(),
    d = duration;
    if (end && end > time) {
          event.stopPropagation();
          d = end - time;
        }
    else {
       localStorage.setItem("end", time + duration);
    }
    var f = d/1000|0;
        var text = this.defaultValue;
        $(this).prop({
            disabled: true
        }).Timer({
            step: function(now, fx) {
                var a = Math.trunc(now);
                var b = ['секунда','секунды','секунд'];
                a = `${a} ${b[1 == a % 10 && 11 != a % 100 ? 0 : 2 <= a % 10 && 4 >= a % 10 && (10 > a % 100 || 20 <= a % 100) ? 1 : 2]}`;
                fx.elem.value = `текст ${a} текст`;
            },
            from: f,
            duration: d,
            to: 0,
            callback: function() {
                localStorage.setItem("end", "0");
                $(this).prop({
                    disabled: false
                }).val(text)
            }
        })
    })
    if (end && end > (new Date).getTime()) $("#send_sms").click();

});
  </script>
</head>

<body>
<input id="send_sms" name="send_sms" type="button" value="Получить код в СМС" >
</body>
</html>

Rasy · #3 (**permalink**) 04.10.2017, 20:22

mxup,
/**

TODO:
- Клик на кнопку. Добавить атрибут disabled.
- Записать в локалсторэдж время в миллисекундах с 1 января 1970 года до текущего момента.
- Добавить 180000 миллисекунд. Записать в локалсторэдж сумму. (теперь есть две метки времени: начальная и конечная).
- Запустить таймер с задержкой равной разницы двух меток времени в миллисекундах, т.е 180000 миллисекунд (3 минуты). По окончанию таймера удалить атрибут disabled у кнопки... Удалить ключи из локального хранилища...
- При обновлении страницы переопределять метку в локалсторэдж время в миллисекундах с 1970 года до текущего момента. Снова вычислить разницу двух меток, передать аргумент разницы в функцию с таймером и запустить отсчет.

*/

mxup · #4 (**permalink**) 04.10.2017, 20:31

Ваш вариант для того чтобы при обновлении страницы таймер не сбрасывался на начальное значение?

Rasy · #5 (**permalink**) 04.10.2017, 20:34

mxup,
Мой? Ага, такая логика.

mxup · #6 (**permalink**) 04.10.2017, 20:51

Сообщение от Rasy

mxup,
Мой? Ага, такая логика.

Да, логика хорошая, только реализация небось сложноватая.

рони · #7 (**permalink**) 04.10.2017, 21:07

Rasy,
спасибо

внесены изменения в пост №2

Rasy · #8 (**permalink**) 04.10.2017, 21:10

рони,
Не за что. Мне до твоего скилла еще пахать и пахать

Nexus · #9 (**permalink**) 05.10.2017, 10:59

рони, можете объяснить почему вы использовали побитовое ИЛИ?

step: function(now, fx) {
	$(fx.elem).html(now | 0)
}

PS. Я не понимаю как работаю побитовые операторы.

Alexandroppolus · #10 (**permalink**) 05.10.2017, 11:23

подозреваю, что здесь это округление до целого.

аналог Math.floor, но только если число не больше максимального int32

Форум

Справочник

Discord чат

Курсы javascript