问题描述
我的网站上嵌入了一个倒数计时器,该计时器功能良好,并使用以下html:
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
Codepen:https://codepen.io/Darlton29/pen/OJNzXEB
但是,在移动设备上,当我希望4个块以适当的间距响应地形成一个立方体时,就会出现问题。以2乘2堆叠。它似乎移动到最后一个块,但是我似乎无法使它为其他块工作,并保持均匀间隔。我正在使用Bootstrap 4。
CSS:
#clockdiv{
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div{
padding: 10px;
border-radius: 3px;
background: #00BF96;
display: inline-block;
}
#clockdiv div > span{
padding: 15px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 3px;
background: #00816A;
display: inline-block;
}
.smalltext{
padding-top: 2px;
padding-bottom: -10px;
font-size: 16px;
}
解决方法
这是您的问题的解决方案。 https://codepen.io/Ultra_Hopeful/pen/bGpLeRK
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,'days': days,'hours': hours,'minutes': minutes,'seconds': seconds
};
}
function initializeClock(id,endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = ('0' + t.days).slice(-2);
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock,1000);
}
var deadline = new Date(Date.parse(new Date("sep 18,2020 15:37:25")));
initializeClock('clockdiv',deadline);
#clockdiv{
font-family: sans-serif;
color: #fff;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap:5px;
width:fit-content;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv div{
border-radius: 3px;
padding:5px;
background: #00BF96;
}
#clockdiv div > span{
padding: 15px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 3px;
font-size:100%;
background: #00816A;
}
.smalltext{
padding: 4px 0px 5px 0px;
font-size:16px;
}
/* Extra small devices (phones,600px and down) */
@media only screen and (max-width: 600px) { #clockdiv { grid-template-columns: 1fr 1fr; } }
/* Small devices (portrait tablets and large phones,600px and up) */
@media only screen and (min-width: 600px) { #clockdiv { grid-template-columns: 1fr 1fr; } }
/* Medium devices (landscape tablets,768px and up) */
@media only screen and (min-width: 768px) { #clockdiv { grid-template-columns: 1fr 1fr 1fr 1fr; } }
/* Large devices (laptops/desktops,992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops,1200px and up) */
@media only screen and (min-width: 1200px) {...}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section style="background-color: pink; color: white;">
<div class="container-fluid mt-5">
<h1>BIRTHDAY COUNTDOWN</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</div>
</section>