Хотите навсегда избавиться от простатита, геморроя, молочницы и других воспалительных заболеваний?
Эффективное лечение народными средствами!
Прополис + эфирные масла целебных растений + масло какао

Счетчик обратного отсчета

Всем здрасте.

Нужен такой счётчик на сайт? Если да, то читайте статью, копируйте код, и размещайте на страницах своего сайта.


Дней Часов Минут Секунд

Счетчик отсчитывает время до определённой даты, которую Вы установите.

Чаще всего это день, час, минута и даже секунда окончания продаж.

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

Ну, или назначить конец света.

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

К тому-же в нём не используется jQuery.

Дату окончания работы счётчика я укажу в формате: День Месяц Число, но можно добавить часы минуты и секунды.

Код:


<script>
timeend= new Date(2018, 11, 20); // Дата остановки счётчика
function Timer() {
today = new Date();
today = Math.floor((timeend-today)/1000);
tsec=today%60;
today=Math.floor(today/60);
if(tsec<10)tsec='0'+tsec; tmin=today%60; today=Math.floor(today/60); if(tmin<10)tmin='0'+tmin; thour=today%24; today=Math.floor(today/24); document.getElementById('d').innerHTML=today; document.getElementById('h').innerHTML=thour; document.getElementById('m').innerHTML=tmin; document.getElementById('s').innerHTML=tsec; window.setTimeout("Timer()",1000); } </script>

<style>
.count {
margin: 0;
padding: 0;
text-align: center;
color: red;
font-family: Impact;
}
.table {
font-size: 18px;
}
th, td {
border-radius: 5px;
background: rgba(255, 215, 0, .6);
}
th {
font-size: 29px;
}
<style>

<body class="count" onload="Timer()">
<table align="center" cellspacing="5" cellpadding="5">
<tr>
<th><span> id="d"></span></th>
<th><span> id="h"></span></th>
<th><span> id="m"></span></th>
<th><span> id="s"></span></th>
</tr>
<tr>
<td>Дней</td>
<td>Часов</td>
<td>Минут</td>
<td>Секунд</td>
</tr>
</table>
</body>

Вот и весь код.

Чтоб установить счётчик на одну страницу сайта на CMS, как в этой статье, script и html вставляются прямо на страницу, а стили в файл style.css.

Если счётчик нужен на всех страницах, то script и html размещаются или в файле header.php или в файле footer.php, в любом месте.

Стили опять же в style.css.

Но вот со стилями, как в первом, так и во втором случаях, приходится поколдовать.

Дело в том, что на CMS таблицам обычно уже задано оформление, и оно отличается от того, что мы имеем.

Если изменить это оформление, то все таблицы имеющиеся на сайте приобретут вид счётчика, поэтому делать этого не стоит.

Лучше задать всем элементам html классы, и сделать оформление согласно этим классам, а не тегам таблиц.

Если и это не сработает, тогда элементам html, оформление задаётся атрибутом style, то есть подключаются встроенные стили, имеющие приоритет перед всеми остальными.

Желаю творческих успехов.

В раздел >>>

Запись опубликована в рубрике Новости. Добавьте в закладки постоянную ссылку.
А так же:

3 комментария на «Счетчик обратного отсчета»

  1. stariс говорит:

    У меня же работает. Значит дело не в счётчике, а в вашей проге. Если это сайт, и если на нём установлен АМР или Турбо, то они будут блокировать javascript.

  2. Иван говорит:

    Моги скинуть скриншот на вашу почту

  3. Иван говорит:

    Счётчик не работает и ещё сдесь в конце должно быть а не
    проверь!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *