Таймеры для сайта

Тамер в строгом стиле

HTML разметка

  • Дней
  • Часов
  • Минут
  • Секунд
  • CSS оформление

    body{font:normal 13px/20px Arial,Helvetica,sans-serif;word-wrap:break-word;color:#eee;background:#353535} #countdown{width:465px;height:112px;text-align:center;background:#222;background-image:-webkit-linear-gradient(top,#222,#333,#333,#222);background-image:-moz-linear-gradient(top,#222,#333,#333,#222);background-image:-ms-linear-gradient(top,#222,#333,#333,#222);background-image:-o-linear-gradient(top,#222,#333,#333,#222);border:1px solid #111;border-radius:5px;box-shadow:0 0 8px rgba(0,0,0,0.6);margin:auto;padding:24px 0;position:absolute;top:0;bottom:0;left:0;right:0} #countdown:before{content:»»;width:8px;height:65px;background:#444;background-image:-webkit-linear-gradient(top,#555,#444,#444,#555);background-image:-moz-linear-gradient(top,#555,#444,#444,#555);background-image:-ms-linear-gradient(top,#555,#444,#444,#555);background-image:-o-linear-gradient(top,#555,#444,#444,#555);border:1px solid #111;border-top-left-radius:6px;border-bottom-left-radius:6px;display:block;position:absolute;top:48px;left:-10px} #countdown:after{content:»»;width:8px;height:65px;background:#444;background-image:-webkit-linear-gradient(top,#555,#444,#444,#555);background-image:-moz-linear-gradient(top,#555,#444,#444,#555);background-image:-ms-linear-gradient(top,#555,#444,#444,#555);background-image:-o-linear-gradient(top,#555,#444,#444,#555);border:1px solid #111;border-top-right-radius:6px;border-bottom-right-radius:6px;display:block;position:absolute;top:48px;right:-10px} #countdown #tiles{position:relative;z-index:1} #countdown #tiles > span{width:92px;max-width:92px;font:bold 48px ‘Droid Sans’,Arial,sans-serif;text-align:center;color:#111;background-color:#ddd;background-image:-webkit-linear-gradient(top,#bbb,#eee);background-image:-moz-linear-gradient(top,#bbb,#eee);background-image:-ms-linear-gradient(top,#bbb,#eee);background-image:-o-linear-gradient(top,#bbb,#eee);border-top:1px solid #fff;border-radius:3px;box-shadow:0 0 12px rgba(0,0,0,0.7);margin:0 7px;padding:18px 0;display:inline-block;position:relative} #countdown #tiles > span:before{content:»»;width:100%;height:13px;background:#111;display:block;padding:0 3px;position:absolute;top:41%;left:-3px;z-index:-1} #countdown #tiles > span:after{content:»»;width:100%;height:1px;background:#eee;border-top:1px solid #333;display:block;position:absolute;top:48%;left:0} #countdown .labels{width:100%;height:25px;text-align:center;position:absolute;bottom:8px} #countdown .labels li{width:102px;font:bold 15px ‘Droid Sans’,Arial,sans-serif;color:#f47321;text-shadow:1px 1px 0 #000;text-align:center;text-transform:uppercase;display:inline-block}

    JS скрипт

    var target_date = new Date().getTime() + (1000*3600*48); // установить дату обратного отсчета var days, hours, minutes, seconds; // переменные для единиц времени var countdown = document.getElementById(«tiles»); // получить элемент тега getCountdown(); setInterval(function () { getCountdown(); }, 1000); function getCountdown(){ var current_date = new Date().getTime(); var seconds_left = (target_date — current_date) / 1000; days = pad( parseInt(seconds_left / 86400) ); seconds_left = seconds_left % 86400; hours = pad( parseInt(seconds_left / 3600) ); seconds_left = seconds_left % 3600; minutes = pad( parseInt(seconds_left / 60) ); seconds = pad( parseInt( seconds_left % 60 ) ); // строка обратного отсчета + значение тега countdown.innerHTML = «» + days + «» + hours + «» + minutes + «» + seconds + «»; } function pad(n) { return (n >Веселый таймер с шариками

    скоро открытие

    @import «https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:900″; html{display:grid;min-height:100%} body{display:grid;background:#183059} .container{position:relative;margin:auto;overflow:hidden;width:650px;height:480px} h1{font-family:»Lato»,sans-serif;text-align:center;margin-top:2em;font-size:1em;text-transform:uppercase;letter-spacing:5px;color:#F6F4F3} #timer{color:#F6F4F3;text-align:center;text-transform:uppercase;font-family:»Lato»,sans-serif;font-size:.7em;letter-spacing:5px;margin-top:25%} .days,.hours,.minutes,.seconds{display:inline-block;padding:20px;width:100px;border-radius:5px} .days{background:#EF2F3C} .hours{background:#F6F4F3;color:#183059} .minutes{background:#276FBF} .seconds{background:#F0A202} .numbers{font-family:»Montserrat»,sans-serif;color:#183059;font-size:5em} .white{position:absolute;background:#F6F4F3;height:85px;width:75px;left:30%;top:2%} .white .triangle{border-bottom:14px solid #F6F4F3} .white .string{background:#F6F4F3;border:1px solid #F6F4F3} .red{position:absolute;background:#EF2F3C;left:18%;top:9%;height:65px;width:70px} .red .triangle{border-bottom:14px solid #EF2F3C} .red .string{background:#EF2F3C;border:1px solid #EF2F3C} .blue{position:absolute;background:#276FBF;height:80px;width:80px;left:60%;top:5%} .blue .triangle{border-bottom:14px solid #276FBF} .blue .string{background:#276FBF;border:1px solid #276FBF} .balloon{border:1px solid #000;border-radius:50% 50% 50% 50%/ 40% 40% 60% 60%;z-index:2} .eye{position:absolute;width:7px;height:7px;top:40%;left:22%;background:#000;border-radius:50%} .eye:after{content:»;left:35px;width:7px;height:7px;border-radius:50%;background:#000;position:absolute} .mouth{position:absolute;top:45%;left:43%;width:7px;height:7px;border-radius:50%} .happy{border:2px solid;border-color:transparent #000 #000 transparent;transform:rotate(45deg)} .triangle{position:absolute;left:40%;bottom:-10%;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent} .string{position:absolute;height:70px;width:1px;left:48%;top:100%;z-index:-1} .star{width:20px;height:20px;background:#F6F4F3;-webkit-clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)} .star-red{width:30px;height:30px;margin-left:51px;margin-top:-5px;background:#EF2F3C;-webkit-clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)} footer{position:absolute;bottom:0;right:0;text-transform:uppercase;padding:10px;font-family:»Lato»,sans-serif;font-size:.7em} footer p{letter-spacing:3px;color:#EF2F3C} footer a{color:#F6F4F3;text-decoration:none} footer a:hover{color:#276FBF}

    Таймер на черном фоне в стиле минимализм

    html{background-color:#000} .countdown{width:100%;float:left;margin:20px auto} .timer{font:72px Courier;color:#fff;text-align:center} function countdown(dateEnd) { var timer, days, hours, minutes, seconds; dateEnd = new Date(dateEnd); dateEnd = dateEnd.getTime(); if ( isNaN(dateEnd) ) { return; } timer = setInterval(calculate, 1000); function calculate() { var dateStart = new Date(); var dateStart = new Date(dateStart.getUTCFullYear(), dateStart.getUTCMonth(), dateStart.getUTCDate(), dateStart.getUTCHours(), dateStart.getUTCMinutes(), dateStart.getUTCSeconds()); var timeRemaining = parseInt((dateEnd — dateStart.getTime()) / 1000) if ( timeRemaining >= 0 ) { days = parseInt(timeRemaining / 86400); timeRemaining = (timeRemaining % 86400); hours = parseInt(timeRemaining / 3600); timeRemaining = (timeRemaining % 3600); minutes = parseInt(timeRemaining / 60); timeRemaining = (timeRemaining % 60); seconds = parseInt(timeRemaining); document.getElementById(«days»).innerHTML = parseInt(days, 10); document.getElementById(«hours»).innerHTML = («0» + hours).slice(-2); document.getElementById(«minutes»).innerHTML = («0» + minutes).slice(-2); document.getElementById(«seconds»).innerHTML = («0» + seconds).slice(-2); } else { return; } } function display(days, hours, minutes, seconds) {} } countdown(’01/19/2038 03:14:07 AM’);

    Таймер на CSS без применения JS

    1. 0 1 2 3 4 5 6 7 8 9 0 0 1 2 3 4 5 6 7 8 9 0
    2. 0 1 2 3 4 5 0 0 1 2 3 4 5 6 7 8 9 0
    3. 0 1 2 3 4 5 0 0 1 2 3 4 5 6 7 8 9 0

    @import «https://fonts.googleapis.com/css?family=Poiret+One»; body{margin:0 auto;width:90%;text-align:center;padding-top:1em;background:#222} ol{background-color:#000;display:inline-block;list-style:none;text-align:center;margin:0 auto;padding:0 .5em;height:6em;overflow:hidden;min-width:590px;border-style:solid;border-color:#000;border-width:20px 10px} li{float:left;padding:0 .5em;background-color:#333;margin:0 .5em;font-family:Poiret One,monospace;color:#ddd} div{float:left;position:relative;animation-timing-function:linear;animation-iteration-count:infinite} span{display:block;font-size:6em;line-height:1em} .sec .one{animation-name:one-step-sec;animation-duration:10s} .sec .ten{animation-name:ten-step-sec;animation-duration:60s} .min .one{animation-name:one-step-min;animation-duration:600s} .min .ten{animation-name:ten-step-min;animation-duration:3600s} .hour .one{animation-name:one-step-hour;animation-duration:36000s} .hour .ten{animation-name:ten-step-hour;animation-duration:360000s} @keyframes one-step-sec { from{top:0} to{top:-60em} } @keyframes ten-step-sec { 15%{top:0} 16.66666666666667%,31.66666666666667%{top:-6em} 33.33333333333334%,48.33333333333333%{top:-12em} 50%,65%{top:-18em} 66.66666666666668%,81.66666666666667%{top:-24em} 83.33333333333335%,98.33333333333333%{top:-30em} 100%{top:-36em} } @keyframes one-step-min { 9.83%{top:0} 10%,19.83%{top:-6em} 20%,29.83%{top:-12em} 30%,39.83%{top:-18em} 40%,49.83%{top:-24em} 50%,59.83%{top:-30em} 60%,69.83%{top:-36em} 70%,79.83%{top:-42em} 80%,89.83%{top:-48em} 90%,99.83%{top:-54em} 100%{top:-60em} } @keyframes ten-step-min { 16.6383%{top:0} 16.66666666666667%,33.30496%{top:-6em} 33.33333333333334%,49.97163%{top:-12em} 50%,66.638296%{top:-18em} 66.66666666666668%,83.30496%{top:-24em} 83.33333333333335%,99.97163%{top:-30em} 100%{top:-36em} } @keyframes one-step-hour { 9.83%{top:0} 10%,19.83%{top:-6em} 20%,29.83%{top:-12em} 30%,39.83%{top:-18em} 40%,49.83%{top:-24em} 50%,59.83%{top:-30em} 60%,69.83%{top:-36em} 70%,79.83%{top:-42em} 80%,89.83%{top:-48em} 90%,99.83%{top:-54em} 100%{top:-60em} } @keyframes ten-step-hour { 9.83%{top:0} 10%,19.83%{top:-6em} 20%,29.83%{top:-12em} 30%,39.83%{top:-18em} 40%,49.83%{top:-24em} 50%,59.83%{top:-30em} 60%,69.83%{top:-36em} 70%,79.83%{top:-42em} 80%,89.83%{top:-48em} 90%,99.83%{top:-54em} 100%{top:-60em} }

    Многофункциональный таймер

    {{(time.h)?(time.h)+’:’:»}}{{(time.m > 9)?time.m:’0’+time.m}}:{{(time.s > 9)?time.s:’0’+time.s}}.{{time.ms}} {{(timeOn)?’стоп’:’старт’}} сбросить *{box-sizing:border-box;transition:.3s cubic-bezier(0.6,0,0.2,1)} .abs-center{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} .rela-block{display:block;position:relative} .flex-container{display:flex} .flex{flex:1 1 0} body{transition:0;background-color:#141e21;font-family:monospace;font-size:16px;color:#2eb4e9;overflow:hidden} .timer{height:100px;width:800px;margin-bottom:10px} .bit-display{position:absolute;top:0;left:0;right:0;bottom:0;padding:2px;border:2px solid rgba(46,212,233,0.439);box-shadow:0 0 8px rgba(46,212,233,0.439)} .bit-container{flex-direction:column} .bit{margin:2px;background-color:#132e34;transition:0;border-radius:2px} .bit.lit{background-color:#0e494f} .time{font-size:80px;color:#2eb4e9;letter-spacing:2px;text-shadow:0 0 20px rgba(46,180,233,0.69)} .time .small{font-size:40px} .timer-button{height:28px;line-height:28px;text-align:center;background-color:#132e34;border-radius:2px;cursor:pointer} .timer-button:hover,.timer-button.lit{background-color:#0e494f} .timer-button+ .timer-button{margin-left:4px} @media screen and (max-width: 976px) { .container{-webkit-transform:translate(-50%,-50%) scale(0.7);transform:translate(-50%,-50%) scale(0.7)} .timer-button{height:36px;line-height:36px;font-size:20px} } var timer = new Vue({ el: ‘#timer’, data: { time: { h: 0, m: 0, s: 0, ms: 0 }, timeOn: true, }, computed: { bTime: function(){ var h1 = (this.time.h > 9)?this.time.h.toString():0; var h2 = (this.time.h > 9)?this.time.h.toString():this.time.h.toString(); var m1 = (this.time.m > 9)?this.time.m.toString():0; var m2 = (this.time.m > 9)?this.time.m.toString():this.time.m.toString(); var s1 = (this.time.s > 9)?this.time.s.toString():0; var s2 = (this.time.s > 9)?this.time.s.toString():this.time.s.toString(); var output = { h1: parseInt(h1).toString(2), h2: parseInt(h2).toString(2), m1: parseInt(m1).toString(2), m2: parseInt(m2).toString(2), s1: parseInt(s1).toString(2), s2: parseInt(s2).toString(2), ms: this.time.ms.toString(2), }; for(var i in output) { while(output.length 9) { this.time.ms = 0; this.time.s++; } if(this.time.s > 59) { this.time.s = 0; this.time.m++; } if(this.time.m > 59) { this.time.m = 0; this.time.h++; } } }, reset: function() { this.time = { h: 0, m: 0, s: 0, ms: 0 }; } } }); setInterval(timer.ping, 100);

    jQuery и другое…

    1. Bethrezen 28.10.2008 в 10:34 1

      Спасибо. Очень полезный плагин. У меня будет использоваться для проверки новых сообщений на сайте

    2. Danilka 17.11.2008 в 4:23 2

      Намного удобнее, чем париться с setTimeOut, спасибо большое, уже пользую.

    3. andrew_l_l_l 22.11.2008 в 23:49 3

      Оч полезный плагин, пасибо!

    4. Юра 16.12.2008 в 16:25 4

      Подскажыте пожалуста как поступить.

      Вот код

      $(«#1″).everyTime(1000, function(i) {
      $.getJSON(«/progo/licznik/index/», function(odp){

      jQuery.each(odp, function(j) {
      $(«#» + odp.id_towaru).text(odp.time);
      $(«#x»+ odp.id_towaru).text(odp.x);
      $(«#cena»+ odp.id_towaru).text(odp.cena);
      });

      });
      });

      Работает хорошо в Opera, Firefox i IE6. Но не работает в IE7 . Пробовал ставить «cache: false;», в функции $.getJSON(), не помогает

      Что может быть не так? Как вы щитаете?

    5. grusha 20.12.2008 в 17:52 5

      А в обратную сторону таймер не работает ?
      Я имею ввиду 30,29,28,…….
      И как можно очистить таймер опять на 0?

    6. Gennady 22.12.2008 в 21:46 6

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

    7. grusha 24.12.2008 в 5:27 7

      Пример:
      После отправки форма она становится не активна , на , скажем 20 секунд.
      Можно конечно написать так:
      «Форма будет активна через 20 секунд».
      И с боку пустить таймер от 0 до 20.
      Но по моему намного красивее если будет так:
      «Форма будет активна через «- здесь таймер от 20 и до 0 – «секунд».

    8. Gennady 24.12.2008 в 8:55 8

      Ну Вы уж право….
      Отнимаете от 20 текущее значение таймера и выводите его – вот Вам и отсчет до 0.

    9. Kotlukomp 28.12.2008 в 8:45 9

      Уж тоже спасибо скажу!

    10. Николай 19.03.2009 в 17:02 10

      А как остановить время, на тот период, пока пользователь открывает другую страницу или другое приложение?

    11. Gennady 19.03.2009 в 23:46 11

      Вопрос – как остановить время? – согласитесь, звучит!
      Таймер привязан к чему-то, к какому-то элементу на странице или хотя бы к объекту window. На другой странице – это уже другой таймер…
      Вы хотите что-то вроде «сколько пользователь провел времени на сайте»? Тогда Вам запоминать значение по unload и с него стартовать таймер на новой странице по load.

    12. Андрей 10.07.2009 в 13:46 12

      прикольный плагин, а есть плагин обратного отсчета времени…тип до НГ иль ДР осталось стока то времени?

    13. Grey 03.08.2009 в 13:17 13

      Добрый день!
      Я так понимаю, данный скрипт работает «здесь и сейчас»? то есть от и до обновления страницы. Или есть возможность включить отсчет от определенной даты в прошлом?

    14. Gennady 03.08.2009 в 20:54 14

      Не очень понимаю, что такое «здесь и сейчас». Этот плагин для jQuery просто помогает создавать таймеры и управлять ими.
      А для того чтобы сделать обратный отсчет например, надо просто немного пофантазировать…
      Ну, например, кто мешает «определенную дату в прошлом» представить количеством секунд, прошедших с 1 января 1970 года? Текущую дату получить тоже не проблема, верно? Запускайте таймер с учетом разницы между этими величинами и, если надо, приводите в человекопонятный вид. И будет Вам отсчет от «даты в прошлом».

    15. Alexey 23.09.2009 в 12:09 15

      Подскажите, плз, как можно реализоваь задержку при вызове обработчика
      $(document).ready(function(){
      $(‘.topmenu ul li’)
      $(‘.topmenu ul li’).hover(

      function() {
      $(this).addClass(«active»);
      $(this).find(‘ul’).stop(true, true);
      $(this).find(‘ul’).toggle(«slide», {direction:»left»}, 2000);
      },
      function() {
      $(this).removeClass(«active»);
      $(this).find(‘ul’).toggle(«slide», {direction:»left»}, 2000);
      }
      );

      });

      т.е. необходимо чтобы скрипт отработал через 1 сек после того как мышка наведена на объект

    16. Gennady 23.09.2009 в 21:12 16

      Я не очень понял Alexey, что Вы хотели добиться…
      В частности не имеет смысла применять find(‘ul’), поскольку this в текущем контексте – набор элементов li (ну разве что у Вас по html-разметке внутри еще ul’ы есть…).
      А вообще здесь не обязательно использовать таймер, можно построить задержку с помощью метода animate.
      Что-то вроде этого:

      $(«li»).hover( function() { $(this).animate({opacity: 0.9}, 1000, function(){ $(this).css(«background-color»,»#f00″); }); }, function() { $(this).animate({opacity: 1}, 1000, function(){ $(this).css(«background-color»,»»); }); } );

      Понятно, что это только пример, но смысл в том, чтобы использовать animate, изменяя что-то незначащее в настоящий момент (или даже не изменяя ничего), а по истечении времени заданного для эффекта вызывать callback-функцию, которая уже сделает дальнейшее…

    17. BrainSlug 29.12.2009 в 2:53 17

      Доброго времени суток!
      Я согласен с предыдущим ответом, по поводу таймера, но увы, у меня к примеру стоит задача выводить меню только если курсор наведен на элемент => определенного времени, в противном случае не выводить. То есть, навел – запустился таймер, сработал, если свел раньше – обнулить таймер.
      Использую такой код (вывод поля через highslide)

      $(document).ready(function(){
      $(‘a.ent’).hover(function(){hs.htmlExpand(this,{contentId:’ediv’, slideshowGroup:’navigation’, outlineType:’drop-shadow’});
      },
      function(){});
      });

      Но увы, сколько не пробовал вписать туда таймеры, не вышло. Буду крайне признателен за помощь.

    18. BrainSlug 29.12.2009 в 4:17 18

      Вобщем смог написать так:
      $(document).ready(function(){
      $(«a.communa»).hover(function(){
      $(this).oneTime(1000, ‘timer2′, function() { hs.htmlExpand(this,{contentId:’communa’,slideshowGroup:’navigation’,targetX:null,targetY:’communa -23px’}); });
      },
      function(){ $(this).stopTime(‘timer2′); });
      });

      firebug ошибок не нашел, да и везде работает, единственное, что было бы не плохо если вы просмотрите код, может можно реализовать изящнее.

    19. nick 06.01.2010 в 20:36 19

      Еще раз скажу спасибо за то, что помогли найти решение кучи проблем! А Ваша книга стала настольной

    20. Arthur 08.01.2010 в 0:51 20

      Вопрос такой. Может ли этот плагин jQuery Timers помещать роботу Яндекс проиндексировать веб-страницу с этим плагином в разделе head?

    21. Gennady 08.01.2010 в 15:16 21

      Нет, Arthur, не может.

    22. Gennady 20.01.2010 в 11:05 22

      Обсуждение статьи можно продолжить на форуме jQuery.

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *