1

私はJavaScriptを学んでいて、カウントダウンタイマーのHTMLページを作成しました。このページでは、JavaScriptコードが間違っclientHeightた本文を返しているようです。<div>ブラウザのサイズを変更した場合でも、カウントダウンHTMLを本文の中央（垂直方向）に表示したいと思います。どこが間違っているのか教えてください。

<!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>ブラウザのサイズを変更しても、垂直方向の中央を維持するためのヒントを教えてください。

4

1 に答える 1

3

そのために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 */
}
于 2012-12-22T07:35:37.007 に答える