форма для входа

1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
10-12-2017 в 18:03 523

Таймер скачивания


Таймер скачивания
Сегодня я хочу предоставить Вашему вниманию таймер на скачивания материала. В данном материале предоставлен скрипт, который будет просить гостей подождать минуту, чтобы скачать файл. После регистрации или авторизации на сайте, пользователь уже сможет качать файлы без ограничения.

Гость



Пользователь сайта



HTML Код, который ставим "Страница материала и комментарии"

Код
<div class = "donwload_file">  
<?if($USER_LOGGED_IN$)?>
  <?if($FILE_URL$)?><a class="hvr hvr-bounce-to-bottom" href="$FILE_URL$"><i class="fa fa-download" aria-hidden="true"></i> Скачать с сервера ($FILE_SIZE$)</a><?endif?>  
<?if($RFILE_URL$)?><a class="hvr hvr-bounce-to-bottom" href="$RFILE_URL$" target="_blank"><i class="fa fa-download" aria-hidden="true"></i> Скачать удаленно ($RFILE_SIZE$)</a><?endif?>
<?else?>
  <div id="timer_1" >
  <div class = "timer">  
Ссылка на скачивание будет доступна через <span id="timer_num"></span> сек.  
</div>  
  </div>
<div style="display:none" id="timer_2">  
<?if($FILE_URL$)?><a class="hvr hvr-bounce-to-bottom" href="$FILE_URL$"><i class="fa fa-download" aria-hidden="true"></i> Скачать с сервера ($FILE_SIZE$)</a><?endif?>  
<?if($RFILE_URL$)?><a class="hvr hvr-bounce-to-bottom" href="$RFILE_URL$" target="_blank"><i class="fa fa-download" aria-hidden="true"></i> Скачать удаленно ($RFILE_SIZE$)</a><?endif?>  
</div>  
  <br>
  <div class = "rega">Скачивание файлов без ограничений доступно только зарегистрированным пользователям.</div>  
  <?endif?>  
</div>  
<script type="text/javascript">  
timer_num = 60; // Число задержки в секундах  
function timer_fc(){  
if(timer_num>0){  
$('#timer_num').text(timer_num);  
timer_num--;  
setTimeout("timer_fc()", 1000)  
}else{  
$('#timer_1').hide(); $('#timer_2').show();  
}}  
timer_fc();  
</script>


CSS Кнопки скачивания


Код
a.hvr {  
  display: inline-block;  
  padding: 1em;  
  margin:1em 0;  
  background-color: #b33d3d;  
  text-decoration: none;  
  color: #fff;  
  text-decoration: none;  
}  
/* Bounce To Bottom */  
.hvr-bounce-to-bottom {  
  display: inline-block;  
  vertical-align: middle;  
  -webkit-transform: perspective(1px) translateZ(0);  
  transform: perspective(1px) translateZ(0);  
  box-shadow: 0 0 1px transparent;  
  position: relative;  
  -webkit-transition-property: color;  
  transition-property: color;  
  -webkit-transition-duration: 0.5s;  
  transition-duration: 0.5s;  
}  
.hvr-bounce-to-bottom:before {  
  content: "";  
  position: absolute;  
  z-index: -1;  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  background: #842d2d;  
  -webkit-transform: scaleY(0);  
  transform: scaleY(0);  
  -webkit-transform-origin: 50% 0;  
  transform-origin: 50% 0;  
  -webkit-transition-property: transform;  
  transition-property: transform;  
  -webkit-transition-duration: 0.5s;  
  transition-duration: 0.5s;  
  -webkit-transition-timing-function: ease-out;  
  transition-timing-function: ease-out;  
}  
.hvr-bounce-to-bottom:hover, .hvr-bounce-to-bottom:focus, .hvr-bounce-to-bottom:active {  
  color: white;  
}  
.hvr-bounce-to-bottom:hover:before, .hvr-bounce-to-bottom:focus:before, .hvr-bounce-to-bottom:active:before {  
  -webkit-transform: scaleY(1);  
  transform: scaleY(1);  
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);  
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);  
}


CSS Просилки регистрации

Код
.rega {display: block; background: #b33d3d; padding: 10px;}
.rega a:hover {color:#fff;}


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

4

Комментарии

Slavik 15-03-2019 в 20:00
УУУ, давно искал это), сейчас попробую поставить :)
Бармен 18-12-2017 в 05:06
Молодцом!
waak 11-12-2017 в 00:50
Уважаемый автор публикации! Спасибо за материал и активность на сайте но не нужно в скриптах публиковать ссылки на другие ресурсы!
Я их всё равно изменю! а в следующий раз я просто дам вам бан на пару дней! за спам.
trem200 11-12-2017 в 01:56
В следующий раз буду внимательней с кодами css, там и впрямь ссылка была на другой ресурс. Извиняюсь, за свою невнимательность.

И да, я изменил код css кнопки, так как по ошибки добавил другой, в общем всё исправил, и проверил код css на добавленные ссылки. В общем в коде их не было.
Добавлять комментарии могут только зарегистрированные пользователи.

[ Регистрация | Вход ]

Автор


Похожие материалы

Реклама



Дополнение

Демонстрация результата либо показана на отдельной странице, либо просто показана на скриншоте. В исключительных случаях, когда нет возможности показать работу даже на скриншоте, используется развернутое описание. Описание есть у каждого материала, этот пункт важен, но иногда описание бывает косвенным, пустословным. Это относится к тем материалам, которым не нужна детальная инструкция.

Установка скриптов – иногда не быстрый процесс. На страницах с описаниями всегда указывается место, куда нужно вставить приложенный код. Если требуется редактирование настроек в Панели управления, то об этом тоже пишется. Если никакой информации об установке нет, значит, код можно ставить в любом месте на сайте, преимущественно в сайдбаре. Прежде чем редактировать страницы, настоятельно рекомендуем делать резервное копирование шаблонов. Этот совет по большей части для новичков.

Гость
Ваша корзина
Ваша корзина пуста
ttalantlev.ucozru