Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Вопросы КЭПу » Помогите стилизовать скрипт обратного отсчета?

Помогите стилизовать скрипт обратного отсчета?


     14.07.2016    Вопросы КЭПу    1093

вопрос
Приобрел модуль для отдельной страницы для скачивания и поставил туда скрипт, с помощью которого кнопка скачать появляется после определенного промежутка (после окончания счетчика). Но скрипт не стилизован и я сам не могу разобраться как это сделать. Помогите в этом деле
Скрипт выглядит вот так
<span id="gotimer" data-route="30">
<div class="download" style="display:none"><div class="col-md-3">   <div id="download_link">
     <a href="{download-link}" id="down_link"><i class="fa fa-cloud-download fa-lg margin-right-sm" aria-hidden="true"></i> Скачать</a>
</div> </div></div>
<div class="download-route">Скачивание будет доступно через <i class="route"></i> секунд</div>
</span>     </center>
                
<script>
var globalRouteInt=setInterval(function(){
var e=$('#gotimer'),i=e.attr('data-route');i--;if(i<1){$('.download',e).show();$('.download-route',e).hide();clearInterval(globalRouteInt)}else{e.attr('data-route',i);$('.download-route .route',e).html(i)}
},1000)
</script>

Ответил: КЭП


Помогите стилизовать скрипт обратного отсчета?

— Тогда мы идём к вам!

10 комментариев

baseroad
Юзер

baseroad - 15 июля 2016 13:52 -

Вот есть хорошие примеры, но как это сделать я не могу понять((((
http://steambuy.com/
http://steampay.com/giveaway/

irrwisch
Юзер

irrwisch - 15 июля 2016 14:39 -

добавьте пару классов и стилезуйте

<span id="gotimer" class="gotimer" data-route="30">
<div class="download" style="display:none"><div class="col-md-3">   <div id="download_link">
     <a href="{download-link}" id="down_link" class="down_link"><i class="fa fa-cloud-download fa-lg margin-right-sm" aria-hidden="true"></i> Скачать</a>
</div> </div></div>
<div class="download-route">Скачивание будет доступно через <i class="route"></i> секунд</div>
</span>


.gotimer{
/*Стили для основного контейнера вашего счётчика */
}

.down_link{
/*Стили для ссылки скачать */
}

.download-route{
/*Стили для надписи "Скачивание будет доступно через N секунд" */
}

baseroad
Юзер

baseroad - 15 июля 2016 15:15 -

irrwisch,
не можете помочь с этим пожалуйста?

baseroad
Юзер

baseroad - 15 июля 2016 15:15 -

irrwisch,
не можете помочь с этим пожалуйста?

irrwisch
Юзер

irrwisch - 15 июля 2016 15:20 -

либо скрин, либо реальный пример как это должно выглядеть

irrwisch
Юзер

irrwisch - 15 июля 2016 16:31 -

Вот, накидал вам пример, дальше сами

baseroad
Юзер

baseroad - 15 июля 2016 16:47 -

irrwisch,
Вот искал пример и немного с другого сайта взял само оформление страницы скачивания. Здесь и таймер и кнопка, но криво почему-то отображается, можете глянуть? Если можно, поправьте скрипт, чтобы таймер не пропадал, а оставался на 0 и открывалась ссылка. Заранее спасибо!
http://jsfiddle.net/sq1rasd6/5/ а брал от сюда http://steampay.com/giveaway/

irrwisch
Юзер

irrwisch - 15 июля 2016 16:59 -

Там что бы увидеть счётчик, надо авторизоваться

baseroad
Юзер

baseroad - 15 июля 2016 17:01 -


Вот скрином выложил

irrwisch
Юзер

irrwisch - 16 июля 2016 15:46 -


Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх