gpt4 book ai didi

javascript - 将 div 放在新行中

转载 作者:行者123 更新时间:2023-11-28 12:59:44 25 4
gpt4 key购买 nike

我编写了这个 javascript 倒计时,但 div 有问题。我怎样才能让我的 div 进入新行。当我说换行时,我认为现在我的剩余时间格式如下:

5h:21min:3sec0h:56min:4sec

但是我怎样才能像这样格式化呢?每次都是换行。

5h:21min:3sec

0h:56min:4sec

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
<script>
var d = new Date();
var n = d.getDay();
if(n == 1 || 2 || 3 || 4 || 5){
var timer1;
function cdtd1() {
var sad1 = new Date();
var dolazak1 = new Date(sad1.getFullYear(),sad1.getMonth(),sad1.getDate(),23,30,00);
var timeDiff1 = dolazak1.getTime() - sad1.getTime();
if (timeDiff1 <= 0) {
clearInterval(timer1);
document.getElementById(id).innerHTML = '';
}
var sekunde1 = Math.floor(timeDiff1 / 1000);
var minute1 = Math.floor(sekunde1 / 60);
var sati1 = Math.floor(minute1 / 60);
var dani1 = Math.floor(sati1 / 24);
sati1 %= 24;
minute1 %= 60;
sekunde1 %= 60;

$("#dani1Box").html(dani1);
$("#sati1Box").html(sati1 + ':');
$("#minute1Box").html(minute1 + ':');
$("#sekunde1Box").html(sekunde1);

timer1 = setTimeout(cdtd1, 1000);
}

$(document).ready(function() {
cdtd1();
});

var timer2;
function cdtd2() {
var sad2 = new Date();
var dolazak2 = new Date(sad2.getFullYear(),sad2.getMonth(),sad2.getDate(),24,00,00);
var timeDiff2 = dolazak2.getTime() - sad2.getTime();
if (timeDiff2 <= 0) {
clearInterval(timer2);
document.getElementById(id).innerHTML = '';
}
var sekunde2 = Math.floor(timeDiff2 / 1000);
var minute2 = Math.floor(sekunde2 / 60);
var sati2 = Math.floor(minute2 / 60);
var dani2 = Math.floor(sati2 / 24);
sati2 %= 24;
minute2 %= 60;
sekunde2 %= 60;
$("#dani2Box").html(dani2);
$("#sati2Box").html(sati2 + ':');
$("#minute2Box").html(minute2 + ':');
$("#sekunde2Box").html(sekunde2);

timer2 = setTimeout(cdtd2, 1000);
}

$(document).ready(function() {
cdtd2();
});
}
</script>





<style type="text/css">
#dani1Box{font-size:70px;
color:#1f62a7;
font-family:Sans-serif;
display: inline-block;
}

#sati1Box{font-size:70px;
color:#1f62a7;
font-family:Sans-serif;
display: inline-block;
}


#minute1Box{font-size:70px;
color:#1f62a7;
font-family:Sans-serif;
display: inline-block;
}



#sekunde1Box{font-size:70px;
color:#1f62a7;
font-family:Sans-serif;
display: inline-block;
}

#dani2Box{font-size:70px;
color:#1f62a7;
font-family:Sans-serif;
display: inline-block;
}

#sati2Box{font-size:70px;
color:#1f62a7;
font-family:Sans-serif;
display: inline-block;
}


#minute2Box{font-size:70px;
color:#1f62a7;
font-family:Sans-serif;
display: inline-block;
}



#sekunde2Box{font-size:70px;
color:#1f62a7;
font-family:Sans-serif;
display: inline-block;
}

h1{font-size:70px;
color:#1f62a7;
font-family:Sans-serif;
display: inline-block;
}

</style>
<center>
<div id="sati1Box">></div>

<div id="minute1Box"></div>

<div id="sekunde1Box"></div>
</div>


<h1> </h1>

<div id="sati2Box"></div>

<div id="minute2Box"></div>

<div id="sekunde2Box"></div>
</div>

</center>
</body>

最佳答案

默认情况下,div 会换行。您已通过添加 display: inline-block; 强制他们不要这样做。

您可能希望将您的元素包装在一个默认为 display: blockdiv 中,然后将您的个人 div 保留为 inline-block。像这样:

<div>
<div id="sati1Box"></div>
<div id="minute1Box"></div>
<div id="sekunde1Box"></div>
</div>
<div>
<div id="sati2Box"></div>
<div id="minute2Box"></div>
<div id="sekunde2Box"></div>
</div>

关于javascript - 将 div 放在新行中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21589737/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com