Как сделать этот таймер обратного отсчета JavaScript адаптивным

В настоящее время я использую модифицированную версию элемента обратного отсчета JS для будущего сайта. Я много узнал о том, как использовать гибкие сетки, но мало что сделал с блоком / встроенным блоком и т. д.

В настоящее время, когда обратный отсчет составляет около 945 пикселей, 4 встроенных блока остаются 4 столбцами и в конечном итоге выходят за край экрана: Как сделать этот таймер обратного отсчета JavaScript адаптивным

Мой желаемый результат будет около 945 пикселей, 4 столбца свернутся на 2 рядом, а текст все еще будет находиться под соответствующими полями. Я возился с изменением кода в "inspect" в chrome и случайно преуспел в этом, но 4 строки текста все еще находились под элементом с полями, а не на своих местах. Вот как выглядит желаемый результат:

Как сделать этот таймер обратного отсчета JavaScript адаптивным

Вот код:

https://codepen.io/Lancewalker/pen/QxpbZx

$(function (){

function countdown() {

var now = new Date();
var eventDate = new Date(2019, 0, 1);
var currentTime = now.getTime();
var evenTime = eventDate.getTime();

var remTime = evenTime - currentTime;

var sec = Math.floor(remTime / 1000);
var min = Math.floor(sec / 60);
var hur = Math.floor(min / 60);
var day = Math.floor(hur / 24);

 hur %= 24;
 min %= 60;
 sec %= 60;

hur = (hur < 10) ? "0" + hur : hur;
min = (min < 10) ? "0" + min : min;
sec = (sec < 10) ? "0" + sec : sec;

$('.seconds').text(sec);
$('.minutes').text(min);
$('.hours').text(hur);
$('.days').text(day);

setTimeout(countdown, 1000);
}

countdown();
});

    body {
    background-color: #333;
}
    .container {
    width: 800px;
    height: 350px;
    margin:  auto;
    text-align: center
}

    .container h2 {
    color: #fff;
    font-size: 30px;
    font-family: Exo, Arial, Sans-serif;
    padding: 50px 0 20px;
    font-weight: normal
}

    .container .content {
    width: 100%;
}

    .container .content > div {
    display: inline-block;
    margin: 35px 10px 0;
    width: 120px;
    height: 130px;
    background: rgb(146, 163, 191, .6);
    border-radius: 8px;
    border: 1px solid #fff;
    color: #fff;
    line-height: 138px;
    font-family: Exo, arial, sans-serif;
    font-size: 55px;
}

    .container .title {
    width: ;
    height: 50px;
    position: relative
}

    .container .title span {
    display: inline-block;
    width: 140px;
    font-size: 20px;
    font-family: 'Exo', arial, sans-serif;
    color: #fff;
    line-height: 50px;
}

<div class = "container">
     <h2>Apartments Coming Soon!</h2>
     <div class = "content">
       <div class = "days">85</div>
       <div class = "hours">22</div>
       <div class = "minutes">33</div>
       <div class = "seconds">54</div>
     </div>
     <div class = "title">
       <span>Days</span>
       <span>Hours</span>
       <span>Minutes</span>
       <span>Seconds</span>
     </div>
   </div>

javascript html css

11.06.2018 05:47

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

805

Ответы 4

Для начала у вас установлена ширина класса .container как жесткое значение 800 пикселей.

.container {
    max-width: 800px;
    width: 90%;
    height: 350px;
    margin:  auto;
    text-align: center
}

Внесение этого простого изменения приведет к тому, что квадраты таймера начнут сворачиваться под ними. Вам придется внести еще несколько изменений самостоятельно, но я бы посмотрел на медиа-запросы и адаптивный дизайн с помощью%. Каждый раз, когда вы жестко кодируете число, такое как 800px, вы будете сталкиваться с проблемами, когда уменьшите размер.

Я бы также подумал о рефакторинге вашего HTML, чтобы квадраты времени и заголовки были вместе.

<div class = "time-square">
    <div class = "time-square-time">88</div>
    <div class = "time-square-title">Days</div>
</div>

Таким образом вы сможете перемещать свой HTML-код более аккуратно, вы столкнетесь с несколькими проблемами, сопоставляющими заголовок со временем в вашей текущей структуре.

О, очень круто. Спасибо! Я взял структуру JS и HTMl из кода, который, очевидно, не реагировал на запуск ... Единственная причина, по которой у меня возникли проблемы, заключается в том, что я сам не писал эту вещь с нуля (в основном из-за того, что я не знал javascript). В противном случае я обычно использую гибкие сетки, потому что мне очень нравится, насколько они просты в использовании. У меня нет времени преобразовывать все это во гибкую сетку, пока я пытаюсь понять, как реализовать javascript, поэтому я пытаюсь перенастроить найденный код, чтобы сделать его отзывчивым. Спасибо за вашу помощь

— 11.06.2018 06:37

Определенно объедините время и текст вместе + 1

— 11.06.2018 06:56

11.06.2018 05:51

Просто разделите div на две части, все будет хорошо.

Если я неправильно понял ваш вопрос, дайте мне знать.

$(function (){

function countdown() {

var now = new Date();
var eventDate = new Date(2019, 0, 1);
var currentTime = now.getTime();
var evenTime = eventDate.getTime();

var remTime = evenTime - currentTime;

var sec = Math.floor(remTime / 1000);
var min = Math.floor(sec / 60);
var hur = Math.floor(min / 60);
var day = Math.floor(hur / 24);

 hur %= 24;
 min %= 60;
 sec %= 60;

hur = (hur < 10) ? "0" + hur : hur;
min = (min < 10) ? "0" + min : min;
sec = (sec < 10) ? "0" + sec : sec;

$('.seconds').text(sec);
$('.minutes').text(min);
$('.hours').text(hur);
$('.days').text(day);

setTimeout(countdown, 1000);
}

countdown();
});

body {
    background-color: #333;
}
    .container {
    width: 800px;
    height: 350px;
    margin:  auto;
    text-align: center
}

    .container h2 {
    color: #fff;
    font-size: 30px;
    font-family: Exo, Arial, Sans-serif;
    padding: 50px 0 20px;
    font-weight: normal
}

    .container .content {
    width: 100%;
}

    .container .content > div {
    display: inline-block;
    margin: 35px 10px 0;
    width: 120px;
    height: 130px;
    background: rgb(146, 163, 191, .6);
    border-radius: 8px;
    border: 1px solid #fff;
    color: #fff;
    line-height: 138px;
    font-family: Exo, arial, sans-serif;
    font-size: 55px;
}

    .container .title {
    width: ;
    height: 50px;
    position: relative
}

    .container .title span {
    display: inline-block;
    width: 140px;
    font-size: 20px;
    font-family: 'Exo', arial, sans-serif;
    color: #fff;
    line-height: 50px;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "container">
     <h2>Apartments Coming Soon!</h2>
     <div class = "content">
       <div class = "days">85</div>
       <div class = "hours">22</div>
     </div>
     <div class = "title">
       <span>Days</span>
       <span>Hours</span>
     </div>
     <div class = "content">
       <div class = "minutes">33</div>
       <div class = "seconds">54</div>
     </div>
     <div class = "title">
       <span>Minutes</span>
       <span>Seconds</span>
     </div>
   </div>

11.06.2018 05:53

Вы можете использовать CSS Media Queries следующим образом:

@media (max-width: 992px) {
 .container .content > div, .container .title span {
  width: 20%;
 }
}
@media (max-width: 768px) {
 .container .content > div, .container .title span {
  width: 50%;
 }
}

11.06.2018 06:08

Я бы посоветовал немного реструктурировать вашу разметку - заключить число и текст («день», «час» и т. д.) В один и тот же родительский элемент. Это гарантирует, что они останутся вместе, когда контент будет упакован.

Для CSS измените width: 800px на max-width - это обеспечит изменение размера содержимого на экранах меньше 800 пикселей.

Затем вы можете использовать CSS Grid для компоновки блоков и упрощения кода.

Codepen

$(function() {

  function countdown() {

    var now = new Date();
    var eventDate = new Date(2019, 0, 1);
    var currentTime = now.getTime();
    var evenTime = eventDate.getTime();

    var remTime = evenTime - currentTime;

    var sec = Math.floor(remTime / 1000);
    var min = Math.floor(sec / 60);
    var hur = Math.floor(min / 60);
    var day = Math.floor(hur / 24);

    hur %= 24;
    min %= 60;
    sec %= 60;

    hur = (hur < 10) ? "0" + hur : hur;
    min = (min < 10) ? "0" + min : min;
    sec = (sec < 10) ? "0" + sec : sec;

    $('.seconds').text(sec);
    $('.minutes').text(min);
    $('.hours').text(hur);
    $('.days').text(day);

    setTimeout(countdown, 1000);
  }

  countdown();
});

body {
  background: #333;
}

.container {
  max-width: 800px;
  height: 350px;
  margin: auto;
  text-align: center;
}

.container h2 {
  color: #fff;
  font-size: 30px;
  font-family: Exo, Arial, Sans-serif;
  padding: 50px 0 20px;
  font-weight: normal;
}

.content {
  display: grid;
  grid-template-columns: repeat(auto-fit, 120px);
  /* use grid gap instead of margin around boxes */
  grid-gap: 10px;
  justify-content: center;
}

.box>div {
  height: 130px;
  background: rgb(146, 163, 191, 0.6);
  border-radius: 8px;
  border: 1px solid #fff;
  color: #fff;
  font-family: Exo, arial, sans-serif;
  font-size: 55px;
  margin-bottom: 20px;
  /* use flexbox instead of lineheight for vertical centering */
  display: flex;
  align-items: center;
  justify-content: center;
}

.box span {
  display: inline-block;
  font-size: 20px;
  font-family: "Exo", arial, sans-serif;
  color: #fff;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "container">
  <h2>Apartments Coming Soon!</h2>
  <div class = "content">

    <div class = "box">
      <div class = "days">85</div>
      <span>Days</span>
    </div>
    <div class = "box">
      <div class = "hours">22</div>
      <span>Hours</span>
    </div>
    <div class = "box">
      <div class = "minutes">33</div>
      <span>Minutes</span>
    </div>
    <div class = "box">
      <div class = "seconds">54</div>
      <span>Seconds</span>
    </div>
  </div>
</div>

11.06.2018 06:55

Другие вопросы по теме

Определить строку URL-адреса?

Создание сетки под текущим фоном

Необходимо разместить изображения на картах для игры на память на JavaScript

Почему обработчик php не отправляет электронные письма (сайт работает на сервере Nginx)

На лету / динамическая переменная - адаптивный веб

Кнопка навигации не закрывает меню при повторном нажатии

Для чего используется тег HTML <label>?

Заменить iframe src

Может ли кто-нибудь сказать мне, как вставить это с помощью HTML / CSS

Javascript / jQuery addClass / removeClass для перевода контейнера не работает

Как сделать этот таймер обратного отсчета JavaScript адаптивным

Ответы 4

Другие вопросы по теме

Похожие вопросы