Блокировка с таймаутом (обратным отсчётом) кнопки после её нажатия
Здравствуйте, на сайте имеется кнопка для того, чтобы при регистрации запросить СМС на телефон.
Так вот, хочу сделать, чтобы был какой то интервал между запросами СМС. Для этого думаю сделать, чтобы кнопка деактивировалась (то есть на неё нельзя было нажать) на 3 минуты и рядом появлялся таймер с обратным отсчётом. Помогите плиз как это сделать средствами JavaScript Код кнопки: Код:
<input id="send_sms" name="send_sms" type="button" value="Получить код в СМС"> |
jquery timer отключение кнопки на несколько минут с индикацией и localStorage
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>
|
mxup,
/** TODO: - Клик на кнопку. Добавить атрибут disabled. - Записать в локалсторэдж время в миллисекундах с 1 января 1970 года до текущего момента. - Добавить 180000 миллисекунд. Записать в локалсторэдж сумму. (теперь есть две метки времени: начальная и конечная). - Запустить таймер с задержкой равной разницы двух меток времени в миллисекундах, т.е 180000 миллисекунд (3 минуты). По окончанию таймера удалить атрибут disabled у кнопки... Удалить ключи из локального хранилища... - При обновлении страницы переопределять метку в локалсторэдж время в миллисекундах с 1970 года до текущего момента. Снова вычислить разницу двух меток, передать аргумент разницы в функцию с таймером и запустить отсчет. */ |
Ваш вариант для того чтобы при обновлении страницы таймер не сбрасывался на начальное значение?
|
mxup,
Мой? Ага, такая логика. |
Цитата:
|
Rasy,
спасибо :write: внесены изменения в пост №2 |
рони,
Не за что. Мне до твоего скилла еще пахать и пахать:) |
рони, можете объяснить почему вы использовали побитовое ИЛИ?
step: function(now, fx) {
$(fx.elem).html(now | 0)
}
PS. Я не понимаю как работаю побитовые операторы. |
подозреваю, что здесь это округление до целого.
аналог Math.floor, но только если число не больше максимального int32 |
Цитата:
Цитата:
|
Цитата:
|
Nexus,
int32 простирается от -2147483648 до 2147483647 включительно (от -(2**31) до 2**31-1). Все что в этих пределах, может нормально и без сюрпризов подвергаться побитовым действиям. а всё потому, что поразрядные операции сначала приводят число к формату int32, потом что-то уже делают. X | 0 просто приводится, потому как "| 0" всегда ничего не меняет. |
Alexandroppolus, благодарю за ответ.
|
|
рони, благодарю за ссылки.
В приведенных вами статьях описываются способы применения побитовых операторов (округление в том числе). Великолепно знать, что округлить число можно еще и этим способом, однако лучше всего понять, как эти операторы работают. Сегодня вечером еще раз попробую понять как они работают. Еще раз спасибо. |
Кнопка отлично работает спасибо. А подскажите ещё пожалуйста вот что: можно ли ещё заблокировать на это время функцию JavaScript, которая вызывается нажатием этой кнопки? То есть чтобы клиент какими нибудь обходными путями (без кнопки) не мог её вызвать.
|
Цитата:
|
Никак не могу понять, как к счетчику добавить произвольный текст... Чтобы был не просто таймер с цифрами, а в виде "10 секунд".
Есть у кого мысли? |
Цитата:
|
Изменить количество кликов по кнопке
Цитата:
|
Цитата:
<!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;
var num = +localStorage.getItem("num")||0;
$("#send_sms").on("click", function (event) {
num++;
localStorage.setItem("num", num);
if(num < 10) return;
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");
localStorage.setItem("num", "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>
|
Спасибо огромное то что надо :victory:
|
Лимит нажатий на кнопку
Цитата:
Вообще мне нужна просто кнопка с лимитом нажатий (желательно отобразить на кнопке сколько нажатий осталось), чтобы лимит при обновлении страницы не обнулялся, как выполнено в коде выше и надпись на ней в режиме ожидания, что то вроде "Лимит окончен подождите (таймер 20 мин)" . Можете помочь с такой кнопкой пожалуйста! |
Цитата:
num = 0;в строку 68. |
sayman100,
<!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 = 20 * 60 * 1E3;
var num = +localStorage.getItem("num") || 0;
var max = 20;
$("#send_sms").on("click", function(event) {
num++;
localStorage.setItem("num", num);
this.textContent = `Получить код в СМС, осталось ${max - num}`;
if (num < max) return;
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.textContent = `Подождите ${a}`;
},
from: f,
duration: d,
to: 0,
callback: function() {
localStorage.setItem("end", "0");
localStorage.setItem("num", "0");
num = 0;
$(this).prop({
disabled: false
}).val(text)
}
})
})
if (num) $("#send_sms").click();
});
</script>
</head>
<body>
<button id="send_sms" name="send_sms" type="button">Получить код в СМС</button>
</body>
</html>
|
Цены тебе нет, просто от души, идеально, мне бы твои знания, Спасибо!
|
Цитата:
|
sayman100,
строку 76 заменить на
}).text("Получить код в СМС");
не копируйте сообщения целиком, без необходимости, и есть цитирование. |
| Часовой пояс GMT +3, время: 16:23. |