Jump to content

Featured Replies

Posted
comment_140311

sean_bean_2-670x405.png.feaa908695f009ff5136271195805c13.png

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

  • Author
comment_140346

Как понял я никто не хочет мне помогать - так помогу я) блок сделан, и вполне работает. Снизу 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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.


Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.