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

0
1816
Блог

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

Часы на HTML

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

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

img 01

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

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. Распологаться они будут в верхней части сайта, в шапке. внешний вид также изменим, поправив таблицу стилей, сделаем компактней.

img 03

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

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

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

Используем любой FTP клиент, к примеру FileZilla, а после открываем в NotePad++. В файле templates.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, но вы можете установить куда хотите.

img 04

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

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

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"]

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

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

img 05

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

img 06

В 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. }

В coundown.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 необходимо разместить в корень сайта.

img 07

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

img 08

 

Похожие записи

Блог Визитка
08.07.2019
0
2948

JA Fixel v1.1.7 - шаблон портфолио для Joomla

JA Fixel – шаблон для Joomla на тему портфолио. В шаблоне реализована поддержка EasyBlog (компонент Joomla...
Блог Портал
06.07.2019
0
1457

JA Fubix v1.1.4 - шаблон спортивных новостей Joomla

JA Fubix - новый шаблон новостного типа от знаменитых разработчиков - студии JoomlArt, который основ...
Блог Визитка
04.07.2019
0
1460

JA Lens v1.0.9 - шаблон сайта фотографа на Joomla

JA Lens - необычный стильный шаблон от профессиональной студии JoomlArt. Данный шаблон имеет уникал...

Комментарии

Ваш комментарий будет отправлен на модерацию.
  • Комментарии не найдены