Перейти к содержанию

Блок countdown


Рекомендуемые сообщения

sean_bean_2-670x405.png.feaa908695f009ff5136271195805c13.png

У меня есть блоки из приложения portal но я не знаю как создать такой блок. Помогите, с меня тонна лайков)

Ссылка на комментарий
Поделиться на другие сайты

Как понял я никто не хочет мне помогать - так помогу я) блок сделан, и вполне работает. Снизу html и css код

html

Спойлер

<div class="countdown-wrap">
  <div id="countdown">
    <p id="demo"></p>
  </div>
</div>
<script>
var countDownDate = new Date("Jan 1, 2018 0:0").getTime();

var x = setInterval(function() {

  var now = new Date().getTime();

  var distance = countDownDate - now;

  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

  document.getElementById("demo").innerHTML = "Новый год близко<br>          " + days  + "д " + hours + "ч " + minutes + "м ";

  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

 

css

Спойлер

.countdown-wrap {
  width: 300px;
  height: 450px;
  position: relative;
  background: url("https://cdn.opendemocracy.net/files/imagecache/wysiwyg_imageupload_lightbox_preset/wysiwyg_imageupload/557099/123_11.jpg") no-repeat;
  background-size: 800px;
  background-position: -160px
}
#countdown { 
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  display: table; 
  background:rgba(0,0,0,.4);
}

#countdown p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: left;
  font-size: 20px;
  text-indent:30px;
  color:#eeeeee;
}

 

 

Вот как он выглядит

Screenshot_1.png.0525e0abea95f5fe14a1bc28265cfc7f.png

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...