Перейти к контенту

Таймер на кнопке


Рекомендуемые сообщения

Видел пару раз в сети... немогу найти теперь

Хочется сделать при регистрации (когда правила висят) на кнопке таймер. пока минута не пройдёт кнопка не активна. В JS не силён :D

Может кто чрканёт пример, либо ссылку на аналогичное.

Ссылка на комментарий
Поделиться на других сайтах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<form action="http://mysite.ru/myfile.php" method="post" name="reg" id="reg">
<div id="login">Логин: <input type="text" name="name"></div>
<div id="pass">Пароль: <input type="password" name="pwd"></div>
<div><textarea cols="" rows="" name="pravila">
Тут текст правил, довольно длинный может быть.
</textarea></div>
<div id="butons"><input type="button" name="sbm" value="ОК" onClick="java script:alert('Вам дано 60 секунд для ознакомления с правилами!')" style="color: Silver;"><input type="Reset"></div>
</form>

<script type="text/javascript">
comanda = "document.getElementById('butons').innerHTML = ";
comanda += "'";
comanda += '<input type="submit" name="sbm" value="ОК"><input type="Reset">';
comanda += "'";
setTimeout('eval(comanda)',60000)
</script>
</body>
</html>

Ссылка на комментарий
Поделиться на других сайтах

В принципе что-то вроде этого.

Хотелось бы конечно на кнопке выводить сам таймер..... 5..4..3..2...

А чтоб таймер работал только когда страница активна... это вроде из рода фантастики?

FatCat, благодарю.

Ссылка на комментарий
Поделиться на других сайтах

В принципе что-то вроде этого.

Хотелось бы конечно на кнопке выводить сам таймер..... 5..4..3..2...

Не сложно через setInterval('функция',интервал)

 

 

А чтоб таймер работал только когда страница активна... это вроде из рода фантастики?

Объявляется переменная с количеством секунд. Пишется функция, отнимающая единицу каждую секунду и перезаписывающая батон.

В бодях на онфокус запуск таймера, на онблур стоп таймера. На достижение нуля стоп таймера и перезапись кнопки на сабмит.

 

В общем, не сложно, но муторно.

Ссылка на комментарий
Поделиться на других сайтах

Я именно на JS никогда не писал... опыта - 0.

Буду конечно пробовать. Однако если попадётся случайно такая регистрация - буду благодарен за пример.

PS. Далеко не на 1 форуме видел подобное... сейчас найти не могу.. хе.

Ссылка на комментарий
Поделиться на других сайтах

Я именно на JS никогда не писал... опыта - 0.

Сделал с таймером:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<form action="http://mysite.ru/myfile.php" method="post" name="reg" id="reg">
<div id="login">Логин: <input type="text" name="name"></div>
<div id="pass">Пароль: <input type="password" name="pwd"></div>
<div><textarea cols="" rows="" name="pravila">
Тут текст правил, довольно длинный может быть.
</textarea></div>
<div id="butons"><input type="button" name="sbm" value="Подождите 1 минуту" onClick="alert('Вам дано 60 секунд для ознакомления с правилами!')" style="color: Gray;"><input type="Reset"></div>
</form>

<script type="text/javascript">
timeleft = 60;
function decrim(){
timeleft -= 1;
document.getElementById('butons').innerHTML = '<input type="button" name="sbm" value="Подождите '+timeleft+' секунд" onClick="endtime()" style="color: Gray;"><input type="Reset">';
if(timeleft == 0){
clearInterval(hs)
document.getElementById('butons').innerHTML = '<input type="submit" name="sbm" value="ОК"><input type="Reset">';
}
}

function endtime(){
alert('Вам осталось ждать '+timeleft+' секунд.\nЗаймите это время чтением правил!')
}

hs = setInterval("decrim()",1000)
</script>
</body>
</html>

Не вижу большого смысла выключать таймер под блур, поэтому не стал морочиться.

Ссылка на комментарий
Поделиться на других сайтах

Я именно на JS никогда не писал... опыта - 0.

Сделал с таймером:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<form action="http://mysite.ru/myfile.php" method="post" name="reg" id="reg">
<div id="login">Логин: <input type="text" name="name"></div>
<div id="pass">Пароль: <input type="password" name="pwd"></div>
<div><textarea cols="" rows="" name="pravila">
Тут текст правил, довольно длинный может быть.
</textarea></div>
<div id="butons"><input type="button" name="sbm" value="Подождите 1 минуту" onClick="alert('Вам дано 60 секунд для ознакомления с правилами!')" style="color: Gray;"><input type="Reset"></div>
</form>


<script type="text/javascript">
timeleft = 60;
function decrim(){
timeleft -= 1;
document.getElementById('butons').innerHTML = '<input type="button" name="sbm" value="Подождите '+timeleft+' секунд" onClick="endtime()" style="color: Gray;"><input type="Reset">';
if(timeleft == 0){
clearInterval(hs)
document.getElementById('butons').innerHTML = '<input type="submit" name="sbm" value="ОК"><input type="Reset">';
}
}

function endtime(){
alert('Вам осталось ждать '+timeleft+' секунд.\nЗаймите это время чтением правил!')
}

hs = setInterval("decrim()",1000)
</script>
</body>
</html>

Не вижу большого смысла выключать таймер под блур, поэтому не стал морочиться.

 

извените за тупой вопрос, но куда это вставлять?))

Ссылка на комментарий
Поделиться на других сайтах

Присоединиться к обсуждению

Вы можете ответить сейчас, а зарегистрироваться позже. Если у вас уже есть аккаунт, войдите, чтобы ответить от своего имени.

Гость
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Ответить в этой теме...

×   Вы вставили отформатированный текст.   Удалить форматирование

  Допустимо не более 75 смайлов.

×   Ваша ссылка была автоматически заменена на медиа-контент.   Отображать как ссылку

×   Ваши публикации восстановлены.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

Зарузка...
×
×
  • Создать...

Важная информация

Находясь на нашем сайте, вы соглашаетесь на использование файлов cookie, а также с нашим положением о конфиденциальности Политика конфиденциальности и пользовательским соглашением Условия использования.