Обычно разработчики шаблонов добавляют дату и год в подвале сайта. Как правило, эти цифры автоматически меняются в зависимости от времени на сервере. Вы наверняка встречали подобное, практически каждый сайт в интернете имеет как минимум одну цифру - действующий год, а где то можно увидеть и дату основания ресурса. Но речь пойдёт не об этом, а о создании часов и таймера для сайта. И подобно дате они будут идти, опираясь не на сервер, а на время вашего компьютера (то есть на посетителя, который открыл страницу). Рано или поздно каждому администратору, по разным причинам, может понадобиться установить такие часы на свой сайт, и мы рассмотрим три варианта на 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.462962962963 1 1 1 1 1 (Оценок: 270)
4.462962962963 270
Опубликовано: 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
Спасибо большое за весьма полезный урок! ;-) Вообще, я в программировани е ноль, но тут все доходчиво и понятно объяснили.

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