Всем здрасте.
Нужен такой счётчик на сайт? Если да, то читайте статью, копируйте код, и размещайте на страницах своего сайта.
| Дней | Часов | Минут | Секунд |
Счетчик отсчитывает время до определённой даты, которую Вы установите.
Чаще всего это день, час, минута и даже секунда окончания продаж.
Но если проявить творческую фантазию, то таким прибамбасом можно украсить поздравление с новым годом или указать точное время вашего появления на свет.
Ну, или назначить конец света.
Скрипт не большой, очень лёгкий и никоим образом не влияет на скорость загрузки страницы, так как загружается в последнюю очередь.
К тому-же в нём не используется 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, то есть подключаются встроенные стили, имеющие приоритет перед всеми остальными.
Желаю творческих успехов.
В раздел >>>
А ну-ка, что там ещё интересного
Дополнительная панель для сайта
Увеличение картинки по клику
Слайдер на javascript
Пылающий заголовок
Растягивающийся блок
В раздел
У меня же работает. Значит дело не в счётчике, а в вашей проге. Если это сайт, и если на нём установлен АМР или Турбо, то они будут блокировать javascript.
Моги скинуть скриншот на вашу почту
Счётчик не работает и ещё сдесь в конце должно быть а не
проверь!