gpt4 book ai didi

javascript - clientHeight 在 JavaScript 中不起作用?

转载 作者:行者123 更新时间:2023-11-30 13:10:35 25 4
gpt4 key购买 nike

我正在学习 JavaScript 并创建了一个倒数计时器 HTML 页面,其中 javascript 代码似乎返回错误 clientHeight的 body 。我想显示我的倒计时 HTML <div>即使重新调整浏览器大小时,也会在正文的中间(垂直)。请告诉我哪里错了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CountDown Timer</title>
<script type="text/javascript" >
function countdown(){
if(isNaN(document.getElementById("time").value))
{
document.getElementById("time").value = "Enter Valid Number";
return;
}
else
{
var i = document.getElementById("time").value;
var j=setInterval(function (){document.getElementById("new").innerHTML = i; i--;
if(i == -2){
document.getElementById("new").innerHTML = "Welcome";
clearInterval(j);}},1000);
}
}

function heightadjust(){
document.getElementById("main1").style.top = ((document.body.clientHeight/2)+54).toString() + "px";
}

</script>
</head>

<body onresize="heightadjust();" onload="heightadjust();">
<div style="margin:0 auto;" id="main1">
<center>
<div id="new" style="display:inline-block; padding:3px; font-size:60px; text-align:center; border:3px solid #000000; background-color:#CC3300; color:#FFFFFF; border-radius:6px;">Enter Time Below</div>
<br />
<input type="text" id="time" onfocus="this.value = ''; this.style.color = '#000000';" value="Enter Time here" style="color:#999999;" />
<button onclick="countdown();" >Start</button>
</center>
</div>

</body>
</html>

请给我一些如何保持<div>的技巧垂直居中,即使浏览器已调整大小。

最佳答案

你不需要 JS。

#in_the_middle {
position:fixed;
left:50%;
top:100%;
width:200px;
margin-left:-100px; /* MUST be equal to width * -0.5 */
height:50px;
margin-top:-25px; /* SHOULD equal height * -0.5, but can vary for different fx */
line-height:50px; /* Remove if there may be more than one line inside */
}

关于javascript - clientHeight 在 JavaScript 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14000963/

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