Обратный таймер на JavaScript

Обратный таймер на JavaScript
Javascript & jQuery 0    32299 0

Сегодня мы рассмотрим таймер обратного отсчета. Такие таймеры часто используются на различных продающих страницах, на лэндингах, на страницах ожидания, на страницах реконструкции сайта и т.д.

ПРИМЕРЫ:

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

Обратный таймер на JavaScript

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 < 10 ? '0' : '') + n;
    }
    
    
    

    Веселый таймер с шариками

    праздничный таймер на JavaScript

    Скачать JS скрипт

    HTML разметка

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

    CSS оформление

    @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 разметка

    CSS оформление

    html{background-color:#000}
    .countdown{width:100%;float:left;margin:20px auto}
    .timer{font:72px Courier;color:#fff;text-align:center}
    

    JS скрипт

    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

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

    HTML разметка

    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

    CSS оформление

    @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}
    }
    

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

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

    HTML разметка

    {{(time.h)?(time.h)+':':''}}{{(time.m > 9)?time.m:'0'+time.m}}:{{(time.s > 9)?time.s:'0'+time.s}}.{{time.ms}}
    {{(timeOn)?'стоп':'старт'}}
    сбросить

    CSS оформление

    *{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}
    }
    

    JS скрипт

    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]:0;
                var h2 = (this.time.h > 9)?this.time.h.toString()[1]:this.time.h.toString()[0];
                var m1 = (this.time.m > 9)?this.time.m.toString()[0]:0;
                var m2 = (this.time.m > 9)?this.time.m.toString()[1]:this.time.m.toString()[0];
                var s1 = (this.time.s > 9)?this.time.s.toString()[0]:0;
                var s2 = (this.time.s > 9)?this.time.s.toString()[1]:this.time.s.toString()[0];
                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[i].length < 4) { output[i] = '0'+output[i]; }
                }
                return output;
            }
        },
        methods: {
            ping: function() {
                if(this.timeOn) {
                    if(++this.time.ms > 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);
    
    
    

    Поделиться с друзьями


    Похожие статьи:

    Анимация с линиями для текста
    Анимация с огнем для текста
    Анимация с сердечками для текста
    Анимация с конфетти для текста
    Анимация с пузырьками для текста
    CSS файлы для браузеров EDGE и IE
    Как попросить посетителей своего сайта отключить AdBlock
    Как сделать маску для ввода E-mail типа ▶ pochta@mail.ru
    Как создать div блок с прокруткой на JS?
    Скролинг страницы вверх и вниз по клику на кнопку

    Комментарии ()

    1. Леонид Кобяшев 26 декабря 2018, 20:20 # +1
      Здравствуйте, а почему после обновления страницы таймер сбрасывается?
      1. Den989 Osipov 20 марта 2020, 08:08 # 0
        Дело в том, что здесь в коде указано относительное время, сделайте его в формате окончательной даты, тогда таймер не будет сбрасываться а будет сначала отсчитывать сколько осталось, затем продолжать считать отнимая секунды

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

      Вы можете авторизоваться на сайте через:
      YandexVkontakte
      Требуется программист