Таймер на сайт - подробный разбор и возможность скачать

Таймер на сайт — сделать самостоятельно или скачать?

В этой статье мы с вами поговорим о том, как создать таймер обратного отсчета с помощью HTML, CSS и JavaScript, в частности фреймворка Vue.js.

Таймер — хороший элемент дизайна. Вы могли нередко его наблюдать на многих сайтах. Например остаток времени до выхода игры, фильма или сериала, либо же другого события.

Используемый фреймворк Vue.js очень удобен и функционален. Он имеет открытый исходный код, в котором можно разобраться, при должных знаниях и усидчивости.

HTML код таймера

Как ни странно, в создании таймера нам не потребуется разметка HTML. Просто создадим небольшой контейнер countdown, в котором и подключим все основные функции.

Кроме этого, нам понадобятся блоки, содержащие цифры таймера.

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Таймер обратного отсчета при помощи Vue.js</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel='stylesheet prefetch' href='https://fokit.ru/wp-content/uploads/files/style.css/style.css'>
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
<!--Начало кода используемого для демонстрации -->
  <div id="controls">
<div align=right><a class="close" title="Закрыть" onclick="document.getElementById('controls').style.display='none';">X</a></div>
<table cellpadding="0" cellspacing="0" id="demo_navi">
  <tr>
    <td width="220"><a href="" rel="nofollow" ><div class="logo"><b><font color=#c3e425></font></b></div></a></td><td width="45"><div class="demo">DEMO</div></td>
	<td style="text-overflow: ellipsis;"><a href="/timer-reverse-count-in-aid-vue-js" class="go-bottom" rel="nofollow" ><div class="name">Таймер обратного отсчета при помощи Vue.js</div></a></td>
  </tr>
</table>
<div id="app">
  <div class="bus">
    <div class="windows"></div>
    <div class="lights"></div>
    <div class="street"></div>
  </div>
  <countdown></countdown>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

После этого необходимо подключить саму библиотеку Vue.js и файл JavaScript, в котором и создадим таймер.

Стилизация страницы — CSS.

Перед тем, как разместить таймер, необходимо предать ему стилизацию, а также создать дизайн для всей веб-страницы.

Первое что мы сделаем — соединим все элементы системы отсчета в одну линию, расположенную по центру. Для каждого элемента нужно задать свойство inline-block, чтобы он не занимал всю линию. После этого применяем следующие стили.

.timer .box {

display: inline-block;

margin: 1rem;

width: 10rem;

text-align: center;

background: #E5989B;

-moz-transform-style: preserve-3d;

}

.timer .box:nth-child(2) .value {

-webkit-animation-delay: 1s;

animation-delay: 1s;

}

.timer .box:nth-child(3) .value {

-webkit-animation-delay: 1.8s;

animation-delay: 1.8s;

}

.timer .box:nth-child(4) .value {

-webkit-animation-delay: 1.3s;

animation-delay: 1.3s;

}

.timer .box:nth-child(5) .value {

-webkit-animation-delay: 2s;

animation-delay: 2s;

}

После этого, создаем эффект прибивания гвоздями. С виду, эффект может показаться сложным, но не так, как вы думаете.

.timer .box .spacer {

position: relative;

content: ";

display: block;

height: 20px;

background: #FFB4A2;

}

.timer .box .spacer::before, .timer .box .spacer::after {

content: ";

position: absolute;

top: 5px;

width: 10px;

height: 10px;

background: #FFCDB2;

border-radius: 50%;

}

Далее задаем стили для цифр таймера. Нужно поменять шрифт, размер и цвет шрифта.

.timer .box .value {

position: relative;

margin: 0;

padding: 1.2rem 0 2rem;

font-family: «Graduate», sans-serif;

font-size: 3em;

color: rgba(109, 104, 117, 0.6);

background: #FFB4A2;

-webkit-transform-origin: top center;

transform-origin: top center;

-webkit-animation: wind 4s ease-out alternate infinite;

animation: wind 4s ease-out alternate infinite;

box-shadow: 0 15px 10px -10px rgba(181, 131, 141, 0);

}

Следующим шагом станет стилизация подписей на таймере. Это, пожалуй, самая простая часть стилизации.

.timer .box .label {

margin: 0;

padding: 1rem;

color: rgba(255, 255, 255, 0.8);

background: #E5989B;

}

Теперь последний, самый сложный этап — создание адаптивности таймера. Это необходимо, чтобы он мог подстраиваться под различные размеры экранов.

@-webkit-keyframes wind
  0%
    -webkit-transform: rotatex(0);
            transform: rotatex(0);
    box-shadow: 0 15px 10px -10px rgba(181, 131, 141, 0);
    color: rgba(109, 104, 117, 0.6);
    background: #FFB4A2;
 
  10%
    -webkit-transform: rotatex(20deg);
            transform: rotatex(20deg);
    box-shadow: 0 15px 10px -10px #ab737e;
    color: rgba(109, 104, 117, 0.45);
    background: #ffc0b1;
 


@keyframes wind
  0%
    -webkit-transform: rotatex(0);
            transform: rotatex(0);
    box-shadow: 0 15px 10px -10px rgba(181, 131, 141, 0);
    color: rgba(109, 104, 117, 0.6);
    background: #FFB4A2;
 
  10%
    -webkit-transform: rotatex(20deg);
            transform: rotatex(20deg);
    box-shadow: 0 15px 10px -10px #ab737e;
    color: rgba(109, 104, 117, 0.45);
    background: #ffc0b1;
 


@-webkit-keyframes lighting
  0%
    box-shadow: -16px 0 0 2px rgba(255, 255, 255, 0.5), 14px 0 0 #E5989B;
 
  4%
    box-shadow: -16px 0 0 2px white, 14px 0 0 #E5989B;
 
  8%
    box-shadow: -16px 0 0 2px rgba(255, 255, 255, 0.5), 14px 0 0 #E5989B;
 
  12%
    box-shadow: -16px 0 0 2px white, 14px 0 0 #E5989B;
 
  20%
    box-shadow: -16px 0 0 2px white, 14px 0 0 #E5989B;
 
  22%
    box-shadow: -16px 0 0 2px rgba(255, 255, 255, 0.5), 14px 0 0 #E5989B;
 


@keyframes lighting
  0%
    box-shadow: -16px 0 0 2px rgba(255, 255, 255, 0.5), 14px 0 0 #E5989B;
 
  4%
    box-shadow: -16px 0 0 2px white, 14px 0 0 #E5989B;
 
  8%
    box-shadow: -16px 0 0 2px rgba(255, 255, 255, 0.5), 14px 0 0 #E5989B;
 
  12%
    box-shadow: -16px 0 0 2px white, 14px 0 0 #E5989B;
 
  20%
    box-shadow: -16px 0 0 2px white, 14px 0 0 #E5989B;
 
  22%
    box-shadow: -16px 0 0 2px rgba(255, 255, 255, 0.5), 14px 0 0 #E5989B;
 


@-webkit-keyframes lighting2
  0%
    box-shadow: 16px 0 0 2px rgba(255, 255, 255, 0.5), -14px 0 0 #E5989B;
 
  4%
    box-shadow: 16px 0 0 2px white, -14px 0 0 #E5989B;
 
  8%
    box-shadow: 16px 0 0 2px rgba(255, 255, 255, 0.5), -14px 0 0 #E5989B;
 
  12%
    box-shadow: 16px 0 0 2px white, -14px 0 0 #E5989B;
 
  20%
    box-shadow: 16px 0 0 2px white, -14px 0 0 #E5989B;
 
  22%
    box-shadow: 16px 0 0 2px rgba(255, 255, 255, 0.5), -14px 0 0 #E5989B;
 


@keyframes lighting2
  0%
    box-shadow: 16px 0 0 2px rgba(255, 255, 255, 0.5), -14px 0 0 #E5989B;
 
  4%
    box-shadow: 16px 0 0 2px white, -14px 0 0 #E5989B;
 
  8%
    box-shadow: 16px 0 0 2px rgba(255, 255, 255, 0.5), -14px 0 0 #E5989B;
 
  12%
    box-shadow: 16px 0 0 2px white, -14px 0 0 #E5989B;
 
  20%
    box-shadow: 16px 0 0 2px white, -14px 0 0 #E5989B;
 
  22%
    box-shadow: 16px 0 0 2px rgba(255, 255, 255, 0.5), -14px 0 0 #E5989B;
 


@media screen and (max-width: 800px)
  .countdown
    width: 100%;
    max-width: 25rem;
 


@media screen and (max-width: 480px)
  .timer .box
    margin: 1rem .5rem;
    width: 8rem;
 

  .expired-timer .box
    width: 18rem;
 

</div>

JavaScript для таймера на сайт

Теперь приступим к созданию таймера. Чтобы установить дату, нам понадобится запись deadline: «Dec 10, 2020, 23:00:00». Можете установить любую другую дату, по вашему предпочтению.

Vue.component('countdown', {
  template:,
  
 data() {
   return{
     deadline: 'Oct 5, 2021 20:45:00',
     days: 'HI',
     hours: 'TH',
     minutes: 'ER',
     seconds: 'E!',
     expired: false 
   };
 },
  
 computed: {
   theTime(){
     var ctx = this;
         
     // Countdown loop    
     var x =  setInterval(function(){
       
       // Difference between the 2 dates
       var countDownDate = new Date(ctx.deadline).getTime(),
           now = new Date().getTime(),
           diff = countDownDate - now,

           // Time conversion to days, hours, minutes and seconds
           tdays = Math.floor(diff / (1000 * 60 * 60 * 24)),
           thours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
           tminutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
           tseconds = Math.floor((diff % (1000 * 60)) / 1000);
       
       // Keep 2 digits
       ctx.days = (tdays < 10) ? '0' + tdays : tdays;
       ctx.hours = (thours < 10) ? '0' + thours : thours;
       ctx.minutes = (tminutes < 10) ? '0' + tminutes : tminutes;
       ctx.seconds = (tseconds < 10) ? '0' + tseconds : tseconds;

       // Check for time expiration
       if(diff < 0){
         clearInterval(x);
         ctx.expired = true;
       }
     }, 1000);
     
     // Return data
     return {
       days: ctx.days,
       hours: ctx.hours,
       minutes: ctx.minutes,
       seconds: ctx.seconds
     };
   }
 }
});



/**************************
  ROOT COMPONENT
 **************************/
var app = new Vue({
  el: '#app'
});

Заключение

У нас получился красивый и адаптивный таймер обратного отсчета. Если сравнить с нашими предыдущими конструкциями ( мега-меню, слайдер и другие.), то она более проста, но это не мешает ей справляться со своими функциями.

На удивление, HTML нам практически не понадобился, только CSS и JavaScript. Но, чем проще, тем лучше!

Чтобы подробнее разобраться в работе таймера, скачайте исходники и просмотрите код самостоятельно. Желаем удачи!

Скачать исходники

Теги:

HTML код таймера

Стилизация страницы — CSS.

JavaScript для таймера на сайт

Заключение

Оставить своё мнение Отменить ответ