javascript - 使这个 Javascript 倒数计时器响应

Question

我目前正在为即将推出的网站使用 JS 倒计时元素的修改版本。我一直在学习如何使用 flex grids，但对 block/inline-block 等没有做太多。

目前，当倒计时达到 945px 左右时，4 个内联 block 框保持为 4 列，并最终溢出到屏幕边缘:

我想要的结果是大约 945 像素，4 列会并排折叠成 2 列，文本仍然在它们正确的框下。我在 chrome 中修改“检查”中的代码，意外地成功了，但是 4 行文本仍然在带有框的元素下方，而不是在适当的位置。这是我想要的结果:

代码如下:

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>

Answer 1

对于初学者，您将 .container 类宽度设置为 800px 硬值。

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

进行这个简单的更改将使您的计时器方 block 开始塌陷在下方。你将不得不自己做一些更多的改变，但我会用 % 来研究媒体查询和响应式设计。任何时候你硬编码一个数字，比如 800px，当你得到一个更小的尺寸时，你都会遇到问题。

我还会考虑重构您的 HTML，以便将时间方 block 和标题放在一起。

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

您将能够以这种方式更干净地移动您的 HTML，您将遇到一些将标题与当前结构中的时间相匹配的问题