&__counter-wrap
max-width: 600px
margin: 0 auto
text-align: center
&__counter-title
color: $white
+f('web700', 30)
&__counter
margin: 25px 0 0
font-size: 0
&-item
display: inline-block
vertical-align: top
color: $white
&:not(:first-child)
margin-left: 16px
&-digit
margin-bottom: 10px
font-size: 0
span
display: inline-block
width: 47px
height: 54px
line-height: 51px
border-radius: 5px
border: 2px solid #ffffff
background-color: rgba($blue-dark, .5)
font-size: 38px
&:not(:first-child)
margin-left: 4px
&-text
+f('web400i', 15)
import moment from 'moment';
export function infoCounter() {
const $counter = $('.js-info-counter');
const initYear = $counter.data('init-year');
const initMonth = $counter.data('init-month');
const initDay = $counter.data('init-day');
const $yearContainer = $counter.find('.js-info-counter-year');
const $monthContainer = $counter.find('.js-info-counter-month');
const $dayContainer = $counter.find('.js-info-counter-day');
const now = moment();
const initDate = moment([initYear, initMonth, initDay]);
const diffDuration = moment.duration(now.diff(initDate));
const year = diffDuration.years();
const month = diffDuration.months();
const day = diffDuration.days();
const checkMonth = getLength(month);
const checkDay = getLength(day);
const yearDigitOne = $yearContainer.children().first();
const yearDigitTwo = $yearContainer.children().last();
const monthDigitOne = $monthContainer.children().first();
const monthDigitTwo = $monthContainer.children().last();
const dayDigitOne = $dayContainer.children().first();
const dayDigitTwo = $dayContainer.children().last();
let splittedDigit = splitNumb(year);
yearDigitOne.text(splittedDigit[0]);
yearDigitTwo.text(splittedDigit[1]);
if (checkDay <= 1) {
dayDigitOne.text('0');
dayDigitTwo.text(`${day}`);
} else {
let splittedDigit = splitNumb(day);
dayDigitOne.text(splittedDigit[0]);
dayDigitTwo.text(splittedDigit[1]);
}
if (checkMonth <= 1) {
monthDigitOne.text('0');
monthDigitTwo.text(`${month}`);
} else {
let splittedDigit = splitNumb(month);
monthDigitOne.text(splittedDigit[0]);
monthDigitTwo.text(splittedDigit[1]);
}
function splitNumb(numb) {
return numb.toString().split('');
}
function getLength(number) {
return number.toString().length;
}
}+e.counter-wrap
+e.counter-title Мы выплачиваем зарплату вовремя уже:
+e.counter.js-info-counter(data-init-year='2005' data-init-month='7' data-init-day='6')
+e.counter-item
+e.counter-digit.js-info-counter-year
+e.SPAN
+e.SPAN
+e.counter-text Лет
+e.counter-item
+e.counter-digit.js-info-counter-month
+e.SPAN
+e.SPAN
+e.counter-text Месяцев
+e.counter-item
+e.counter-digit.js-info-counter-day
+e.SPAN
+e.SPAN
+e.counter-text Дней