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