Js Обратный отсчет текст не остается в центре границы - PullRequest
Новая
       4

Js Обратный отсчет текст не остается в центре границы

0 голосов
/ 07 сентября 2018

У меня проблема с выравниванием текста внутри рамки. Текст должен быть в центре границы.

Как видите, текст немного правее, а номер немного левее

Мне удалось заставить его работать на Chrome, но он не работает на Code Pen, Safari или Internet Explorer. Вот кодекс

Вот мой HTML 

// Set the date we're counting down to
var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();

// setting the location and time zone for said location
// var city = ' London';
// var offset = '+1.0 ';

// Update the count down every 1 second
var x = setInterval(function() {
  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for weeks, days, hours, minutes and seconds
  // var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
  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));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  document.getElementById("Countdown_Days").innerHTML =
    days + "<span>" + "<br>" + "Days" + "</span>";

  document.getElementById("Countdown_Hours").innerHTML =
    hours + "<span>" + "<br>" + "Hours" + "</span>";

  document.getElementById("Countdown_Minutes").innerHTML =
    minutes + "<span>" + "<br>" + "Minutes" + "</span>";

  document.getElementById("Countdown_Seconds").innerHTML =
    seconds + "<span>" + "<br>" + "Seconds" + "</span>";
});
h2 {
  border: solid 1px #000;
  border-radius: 100%;
  display: inline-flex;
  padding: 30px 25px;
  font-size: 20px !important;
  color: #fff;
  font-weight: 600;
  line-height: 25px;
  height: 125px;
  width: 125px;
  margin: auto;
  text-align: center;
  margin-left: 5px;
}
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<div class="overlay">
  <div class="row marginnone">
    <div class="col-lg-7 col-md-12 center">
      <div class="countdown">
        <h1>Launch In</h1>
        <h2 id="Countdown_Days">58<span><br>Days</span></h2>
        <h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
        <h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
        <h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
      </div>
    </div>
  </div>
</div>

Заранее спасибо за любую помощь!

Ответы [ 2 ]

0 голосов
/ 07 сентября 2018

Используйте этот CSS вместо вашего CSS: 

.countdown {
  display: flex;
}

h2{
  border: solid 1px #000;
  border-radius: 100%;
  padding: 30px 25px;
  font-size: 20px !important;
  color: #fff;
  font-weight: 600;
  line-height: 25px;
  height: 125px;
  width: 125px;
  margin: auto;
  text-align: center;
  margin-left: 5px;
}

И ваш h1 находится выше обратного отсчета div 

<div class="overlay">
  <div class="row marginnone">
   <div class="col-lg-7 col-md-12 center">
    <h1>Launch In</h1>
    <div class="countdown">
      <h2 id="Countdown_Days">58<span><br>Days</span></h2>
      <h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
      <h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
      <h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
    </div>
   </div>
  </div>
 </div>


// Set the date we're counting down to
var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();

// setting the location and time zone for said location
// var city = ' London';
// var offset = '+1.0 ';

// Update the count down every 1 second
var x = setInterval(function() {
  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for weeks, days, hours, minutes and seconds
  // var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
  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));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  document.getElementById("Countdown_Days").innerHTML =
    days + "<span>" + "<br>" + "Days" + "</span>";

  document.getElementById("Countdown_Hours").innerHTML =
    hours + "<span>" + "<br>" + "Hours" + "</span>";

  document.getElementById("Countdown_Minutes").innerHTML =
    minutes + "<span>" + "<br>" + "Minutes" + "</span>";

  document.getElementById("Countdown_Seconds").innerHTML =
    seconds + "<span>" + "<br>" + "Seconds" + "</span>";
});
.countdown {
  display: flex;
}

h2{
  border: solid 1px #000;
  border-radius: 100%;
  padding: 30px 25px;
  font-size: 20px !important;
  color: #fff;
  font-weight: 600;
  line-height: 25px;
  height: 125px;
  width: 125px;
  margin: auto;
  text-align: center;
  margin-left: 5px;
}
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<div class="overlay">
  <div class="row marginnone">
    <div class="col-lg-7 col-md-12 center">
      <h1>Launch In</h1>
      <div class="countdown">
        <h2 id="Countdown_Days">58<span><br>Days</span>           </h2>
        <h2 id="Countdown_Hours">22<span><br>Hours</span>           </h2>
        <h2 id="Countdown_Minutes">42<span>                           <br>Minutes</span>
        </h2>
        <h2 id="Countdown_Seconds">40<span>                        <br>Seconds</span>
        </h2>
      </div>
    </div>
  </div>
</div>
0 голосов
/ 07 сентября 2018

Я изменил направление flex для элементов H2 и вместо элементов span и br я использовал элементы div. Это результат, который вы искали? 

// Set the date we're counting down to
var countDownDate = new Date("November 05, 2018 9:30:00 GMT").getTime();

// setting the location and time zone for said location
// var city = ' London';
// var offset = '+1.0 ';

// Update the count down every 1 second
var x = setInterval(function() {
  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for weeks, days, hours, minutes and seconds
  // var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
  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));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Output the result in an element with id="demo"
  document.getElementById("Countdown_Days").innerHTML = `<div>${days}</div><div>Days</div>`;

  document.getElementById("Countdown_Hours").innerHTML =`<div>${hours}</div><div>Hours</div>`;

  document.getElementById("Countdown_Minutes").innerHTML = `<div>${minutes}</div><div>Minutes</div>`;

  document.getElementById("Countdown_Seconds").innerHTML = `<div>${seconds}</div><div>Seconds</div>`;
});
h2 {
  align-items: center;
  border: solid 1px #000;
  border-radius: 100%;
  display: inline-flex;
  flex-direction: column;
  padding: 30px 25px;
  font-size: 20px !important;
  color: #fff;
  font-weight: 600;
  line-height: 25px;
  height: 125px;
  width: 125px;
  margin: auto;
  margin-left: 5px;
}
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<div class="overlay">
  <div class="row marginnone">
    <div class="col-lg-7 col-md-12 center">
      <div class="countdown">
        <h1>Launch In</h1>
        <h2 id="Countdown_Days">58<span><br>Days</span></h2>
        <h2 id="Countdown_Hours">22<span><br>Hours</span></h2>
        <h2 id="Countdown_Minutes">42<span><br>Minutes</span></h2>
        <h2 id="Countdown_Seconds">40<span><br>Seconds</span></h2>
      </div>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...