Часы и таймер обратного отсчёта для Joomla

Обычно разработчики шаблонов добавляют дату и год в подвале сайта. Как правило, эти цифры автоматически меняются в зависимости от времени на сервере. Вы наверняка встречали подобное, практически каждый сайт в интернете имеет как минимум одну цифру - действующий год, а где то можно увидеть и дату основания ресурса. Но речь пойдёт не об этом, а о создании часов и таймера для сайта. И подобно дате они будут идти, опираясь не на сервер, а на время вашего компьютера (то есть на посетителя, который открыл страницу). Рано или поздно каждому администратору, по разным причинам, может понадобиться установить такие часы на свой сайт, и мы рассмотрим три варианта на jQuery. Первый вариант на HTML - он будет показывать день недели, дату, месяц, год, а так же время до секунды. Второй - на основе первого внедрим в шаблон для Joomla. А третий - создадим отдельную страницу на сайте для обратного отсчёта до какого-то события. Для дальнейшей работы необходимо иметь версию Joomla 3.2 и выше, я использую 3.6 и стандартный шаблон protostar.

Часы на HTML

Так почему же часы будут работать, опираясь на время с компьютера пользователя? Дело в том, что на сервере время и дата может отличаться от времени на компьютере, ввиду большой удалённости от населённого пункта, где вы сейчас находитесь. Там обычно используют московское время, если сервер находиться в России. Если в других странах, то разница сильно ощутима. А на компьютере мы сами следим, чтобы всё шло верно. С датой то же самое, у человека не будет чёткого представления, когда произойдёт событие, если таймер неверно показывает, но о нём позже.

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

Часы для Joomla

Создайте на рабочем столе папку Clock и положите в неё файлы index.html и style.css. Для того чтобы их создать воспользуйтесь программой NotePad++. Вот что должно получиться:

img 02

Откройте файлы в программе. Добавьте следующий код в index.html, а после сохранитесь:

HTML код:
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     <title>Digital Clock</title>
  6.  
  7.     <link rel="stylesheet" type="text/css" href="style.css">
  8.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  9. </head>
  10.  
  11. <body>
  12. <script type="text/javascript">
  13. $(document).ready(function() {
  14. var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 
  15. var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
  16. var newDate = new Date();
  17. newDate.setDate(newDate.getDate());
  18. $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
  19. setInterval( function() {
  20.     var seconds = new Date().getSeconds();
  21.     $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
  22.     },1000);
  23. setInterval( function() {
  24.     var minutes = new Date().getMinutes();
  25.     $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
  26.     },1000);
  27. setInterval( function() {
  28.     var hours = new Date().getHours();
  29.     $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
  30.     }, 1000);
  31. }); 
  32. </script>
  33.     <div>
  34.         <div id="Date"></div>
  35.         <ul>
  36.             <li id="hours"> </li>
  37.             <li id="point">:</li>
  38.             <li id="min"> </li>
  39.             <li id="point">:</li>
  40.             <li id="sec"> </li>
  41.         </ul>
  42.     </div>
  43. </body>
  44. </html>

Для style.css используйте это:

CSS код:
  1. body{
  2.      background: #8ba1b7;
  3.      font: bold 12px Arial, Helvetica, sans-serif;
  4.      margin: 0;
  5.      padding: 0;
  6.      min-width: 960px;
  7. }
  8. a { 
  9.     text-decoration:none; 
  10.     color:#00c6ff;
  11. }
  12. h1 {
  13.     font: 4em normal Arial, Helvetica, sans-serif;
  14.     padding: 20px;    margin: 0;
  15.     text-align:center;
  16. }
  17. h1 small{
  18.     font: 0.2em normal  Arial, Helvetica, sans-serif;
  19.     text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
  20.     display: block;
  21. }
  22. h2 {
  23.     font-weight:700;
  24.     color:#bbb;
  25.     font-size:20px;
  26. }
  27. h2, p {
  28.     margin-bottom:10px;
  29. }
  30. @font-face {
  31.     font-weight: normal;
  32.     font-style: normal;
  33. }
  34. .clock {
  35.     width: 800px;
  36.     margin: 60px auto;
  37.     padding: 20px;
  38.     color: #fff;
  39. }
  40. #Date { 
  41.     font-family: Arial, Helvetica, sans-serif;
  42.     font-size: 1.3em;
  43.     text-align: center;
  44. }
  45. ul {
  46.     width: 650px;
  47.     margin: 10px auto;
  48.     padding: 0px;
  49.     list-style: none;
  50.     text-align: center;
  51.     background: #657e96;
  52.     border-radius: 10px;
  53.     box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 15px 5px;
  54. }
  55. ul li { 
  56.     display: inline;
  57.     font-size: 10em;
  58.     text-align: center;
  59.     font-family: Arial, Helvetica, sans-serif;
  60. }
  61. #point {
  62.     position: relative;
  63.     -moz-animation: mymove 1s ease infinite;
  64.     -webkit-animation: mymove 1s ease infinite;
  65.     padding-left: 10px;
  66.     padding-right: 10px; 
  67. }
  68. @-webkit-keyframes mymove {
  69. 0% {opacity:1.0;}
  70. 50% {opacity:0;}
  71. 100% {opacity:1.0;}    
  72. }
  73. @-moz-keyframes mymove {
  74. 0% {opacity:1.0;}
  75. 50% {opacity:0;}
  76. 100% {opacity:1.0;}
  77. }

Вот и всё, откройте index.html в браузере и увидите часы. Вот для наглядности, что должно получиться Демо.

Установка часов в шаблон Joomla

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

Установка часов на Joomla сайт

Находим на вашем сервере следующие файлы и скачиваем на компьютер:

index.php - путь по умолчанию …/templates/protostar/Index.php

template.css - путь по умолчанию …/templates/protostar/css/template.css

Используем любой FTP клиент, к примеру FileZilla, а после открываем в NotePad++. В файле template.css опускаемся в самый низ и добавляем эти строчки:

CSS код:
  1. /* Clock */
  2. .clock {
  3.     width: 250px;
  4.     margin: 20px auto;
  5.     padding: 15px;
  6.     color: #ffffff;
  7.     border-radius: 5px;
  8.     background: #1b668f;
  9.     box-shadow: #778e9a 0px 4px 10px 0px;
  10. }
  11. .clock ul {
  12.     margin: 5px auto;
  13.     padding: 0px;
  14.     list-style: none;
  15.     text-align: center;
  16. }
  17. .clock ul li { 
  18.     display: inline;
  19.     font-size: 1em;
  20.     text-align: center;
  21.     font-family: Arial, Helvetica, sans-serif;
  22. }
  23. #Date { 
  24.     font-family: Arial, Helvetica, sans-serif;
  25.     font-size: 1.3em;
  26.     text-align: center;
  27. }
  28. #point {
  29.     position: relative;
  30.     -moz-animation: mymove 1s ease infinite;
  31.     -webkit-animation: mymove 1s ease infinite;
  32.     padding-left: 1px;
  33.     padding-right: 1px; 
  34. }
  35. @-webkit-keyframes mymove {
  36. 0% {opacity:1.0;}
  37. 50% {opacity:0;}
  38. 100% {opacity:1.0;}    
  39. }
  40. @-moz-keyframes mymove {
  41. 0% {opacity:1.0;}
  42. 50% {opacity:0;}
  43. 100% {opacity:1.0;}
  44. }

Сохранив, можете вернуть его на место …/templates/protostar/css/template.css. Далее, открыв index.php, находите тег <body> и вставляете этот код после него:

jQuery код:
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. jQuery(document).ready(function() {
  4. var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 
  5. var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
  6. var newDate = new Date();
  7. newDate.setDate(newDate.getDate());
  8. jQuery('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
  9. setInterval( function() {
  10.     var seconds = new Date().getSeconds();
  11.     jQuery("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
  12.     },1000);
  13. setInterval( function() {
  14.     var minutes = new Date().getMinutes();
  15.     jQuery("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
  16.     },1000);
  17. setInterval( function() {
  18.     var hours = new Date().getHours();
  19.     jQuery("#hours").html(( hours < 10 ? "0" : "" ) + hours);
  20.     }, 1000);
  21. }); 
  22. </script>
  23. <div>
  24.     <div id="Date"></div>
  25.     <ul>
  26.         <li id="hours"> </li>
  27.         <li id="point">:</li>
  28.         <li id="min"> </li>
  29.         <li id="point">:</li>
  30.         <li id="sec"> </li>
  31.     </ul>
  32. </div>

Я это сделал сразу после класса body (чуть ниже тега <body>), но вы можете устанавливать куда хотите:

Код для таймера

Возвращаем наш index.php назад …/templates/protostar/Index.php.

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

jQuery код:
  1. var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 
  2. var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]

Можете поменять слова на русский вариант, месяцы и дни будут тогда понятны нашему человеку. Ещё пришлось убирать переменные $ и писать в место них jQuery, это необходимо для того, чтобы не было конфликта со скриптами от Joomla. Подключенная библиотека jQuery в версии Joomla 3.6, а так же при использовании стандартного шаблона protostar не обязательна, но оставил на всякий случай, если вы вдруг будете делать на своём шаблоне. Осталось открыть ваш сайт и проверить работу кода.

Создание страницы с таймером обратного отсчёта

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

Таймер для Joomla

Сделаем мы это в обход движка, в корень поместим необходимые файлы и добавим пункт меню на сайте с внешней ссылкой. А так как движок не отвечает за показ страницы, то не нужно беспокоиться по поводу конфликта скриптов. Для начала создайте папку с названием countdown на рабочем столе. Имейте в виду, если название напишите с большими буквами, то впоследствии и ссылку придётся вставлять с большими (иначе движок переадресует ваши попытки на главную страницу). Создаём следующие файлы - index.html, style.css, countdown.js. Бросаем их в нашу подготовленную папку:

Файлы таймер обратного отсчёта

В index.html вставляем это:

HTML код:
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Countdown</title>
  6.     <link rel="stylesheet" media="screen" href="style.css" />
  7.     <script src="countdown.js"></script>
  8. </head>
  9.  
  10. <body>
  11.     <div>
  12.         <h1>Countdown</h1>
  13.         <h2>Время остановится 1 янв 2019 в 00:00:00</h2>
  14.         <div id="CDT"></div>
  15.     </div>
  16. </body>
  17. </html>

В style.css вставляем это:

CSS код:
  1. body {
  2.     background: #3f4f63;
  3.     color: #fff;
  4.     -moz-text-shadow: 0 -1px 0 #000;
  5.     -webkit-text-shadow: 0 -1px 0 #000;
  6.     text-shadow: 0 -1px 0 #000;
  7.     font-family: 'Helvetica Neue','Helvetica','Arial', sans-serif;
  8. }
  9. .container {
  10.     text-align: center;
  11.     margin: 0 auto;
  12.     width: 800px;
  13.     height: 400px;
  14.     position: absolute;
  15.     top: 50%;
  16.     left: 50%;
  17.     margin: -200px 0 0 -400px;
  18. }
  19. h1,
  20. h2 {
  21.     margin: 0;
  22.     color: #eee;
  23.     -moz-text-shadow: 0 3px 3px #000000;
  24.     -webkit-text-shadow: 0 3px 3px #000000;
  25.     text-shadow: 0 3px 3px #000000;
  26. }
  27. h1 {
  28.     font-size: 60px;
  29.     margin: 0 0 10px;
  30.     line-height: 1;
  31. }
  32. h2 {
  33.     font-size: 18px;
  34. }
  35. #CDT {
  36.     font-size: 60px;
  37.     color: #eee;
  38.     margin: 70px 0 100px;
  39.     font-weight: bold;
  40. }
  41. #CDT .number-wrapper {
  42.     margin: 10px;
  43.     -moz-box-shadow: 0 5px 8px #000000;
  44.     -webkit-box-shadow: 0 5px 8px #000000;
  45.     box-shadow: 0 5px 8px #000000;
  46.     position: relative;
  47. }
  48. #CDT .number {
  49.     display: inline-block;
  50.     *display: inline;
  51.     *zoom: 1;
  52.     background: #000;
  53.     background-image: linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
  54.     background-image: -o-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
  55.     background-image: -moz-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
  56.     background-image: -webkit-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
  57.     background-image: -ms-linear-gradient(bottom, #000000 2%, #3c3c3c 50%, #000000 100%);
  58.     -webkit-border-top-right-radius: 7px;
  59.     -webkit-border-bottom-right-radius: 0;
  60.     -webkit-border-bottom-left-radius: 0;
  61.     -webkit-border-top-left-radius: 0;
  62.     -moz-border-radius-topright: 7px;
  63.     -moz-border-radius-bottomright: 0;
  64.     -moz-border-radius-bottomleft: 0;
  65.     -moz-border-radius-topleft: 0;
  66.     border-top-right-radius: 7px;
  67.     border-bottom-right-radius: 0;
  68.     border-bottom-left-radius: 0;
  69.     border-top-left-radius: 0;
  70.     -webkit-border-radius: 7px;
  71.     -moz-border-radius: 7px;
  72.     border-radius: 7px;
  73.     -moz-background-clip: padding;
  74.     -webkit-background-clip: padding-box;
  75.     background-clip: padding-box;
  76.     padding: 0 12px;
  77.     height: 80px;
  78.     line-height: 80px;
  79.     text-align: center;
  80.     border: 1px solid #555;
  81.     -moz-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
  82.     -webkit-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
  83.     box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
  84.     -moz-text-shadow: 0 3px 3px #000000;
  85.     -webkit-text-shadow: 0 3px 3px #000000;
  86.     text-shadow: 0 3px 3px #000000;
  87. }
  88. #CDT .line {
  89.     position: absolute;
  90.     width: 100%;
  91.     height: 1px;
  92.     top: 52%;
  93.     left: 0;
  94.     background: #000;
  95.     -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  96.     -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  97.     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  98. }
  99. .caption {
  100.    font-size: 12px;
  101.    position: absolute;
  102.    bottom: -30px;
  103.    left: 0;
  104.    text-align: center;
  105.    width: 100%;
  106.    color: #fff;
  107. }

Ну и в countdown.js вставляем это:

jQuery код:
  1. function CountdownTimer(elm,tl,mes){
  2.     this.initialize.apply(this,arguments);
  3. }
  4. CountdownTimer.prototype={
  5. initialize:function(elm,tl,mes) {
  6.     this.elem = document.getElementById(elm);
  7.     this.tl = tl;
  8.     this.mes = mes;
  9. },countDown:function(){
  10.     var timer='';
  11.     var today=new Date();
  12.     var day=Math.floor((this.tl-today)/(24*60*60*1000));
  13.     var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
  14.     var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
  15.     var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
  16.     var me=this;
  17. if( ( this.tl - today ) > 0 ){
  18.     timer += '<span><div></div><div>DAYS</div><span>'+day+'</span></span>';
  19.     timer += '<span><div></div><div>HOURS</div><span>'+hour+'</span></span>';
  20.     timer += '<span><div></div><div>MINS</div><span>'+this.addZero(min)+'</span></span><span><div></div><div>SECS</div><span>'+this.addZero(sec)+'</span></span>';
  21.     this.elem.innerHTML = timer;
  22.     tid = setTimeout( function(){me.countDown();},10 );
  23. }else{
  24.     this.elem.innerHTML = this.mes;
  25.     return;
  26. }
  27. },addZero:function(num){ return ('0'+num).slice(-2); }
  28. }
  29. function CDT(){
  30.  
  31. // Set countdown limit
  32.     var tl = new Date('2019/01/01 00:00:00');
  33.  
  34. // You can add time's up message here
  35.     var timer = new CountdownTimer('CDT',tl,'<span><div></div><span>Time is up!</span></span>');
  36.     timer.countDown();
  37. }
  38. window.onload=function(){
  39.     CDT();
  40. }

Обратите внимание на скрипт, а точнее на нижнюю его часть:

jQuery код:
  1. function CDT(){
  2.  
  3. // Set countdown limit
  4.     var tl = new Date('2019/01/01 00:00:00');
  5.  
  6. // You can add time's up message here
  7.     var timer = new CountdownTimer('CDT',tl,'<span><div></div><span>Time is up!</span></span>');
  8.     timer.countDown();
  9. }

Тут выставляется дата и время окончания отсчёта, а так же выводимое сообщение после.

После того как вы сохраните все файлы, папку countdown необходимо разместить в корень сайта (туда где лежат файлы htaccess.txt, configuration.php и web.config.txt).

Файлы таймера для Joomla

Теперь наш таймер доступен по прямой ссылке http://вашсайт.ru/countdown/index.html. Остаётся только создать пункт меню в панели управления и добавить туда эту ссылку, чтобы страница стала доступна всем. Делать это нужно в «Панель управления -> Выбираем основное меню -> Создать пункт меню», дальше заполняем заголовок, выбираем тип «Внешний URL» и добавляем ссылку.

Таймер обратного отсчёта на Joomla сайте

Остаётся только сохранить и проверить. Вот как выглядит страница с таймером - Демо.

Заключение

За вывод всей информации в часах и таймере отвечают скрипты, на странице же цифры выводятся при помощи тегов <div>. Поэтому при редактировании, знания java языка будут не лишними. Стили в примерах специально использовал упрощённые.

 
4.4649446494465 1 1 1 1 1 (Оценок: 271)
4.4649446494465 271
Опубликовано: 21-07-2016

Соседние материалы

< Назад Вперёд >

Комментарии  

Fyyygg Gggiih
+1 #3 Fyyygg Gggiih 12.03.2018 08:03
Я хотел сделать розыгрыш бесплатных обедов, на сайте столовой. Долго не мог найти таймер для отчета начала розыгрыша. Здесь я нашел то что искал. Большое спасибо что развиваете эту тему. Я сделал и вроде все заработало на моем сайте.
Семён Лёля
+1 #2 Семён Лёля 04.08.2017 09:48
Огромное спасибо автору статьи.Описал всё грамотно и понятно для любого человека.
Андрей Самсонов
+1 #1 Андрей Самсонов 08.06.2017 15:31
Спасибо большое за весьма полезный урок! ;-) Вообще, я в программировани е ноль, но тут все доходчиво и понятно объяснили.

Вы не зарегистрированы, чтобы оставлять комментарии.