Javascript 为什么我的HTML文件有时只能正确加载？_Javascript_Html

Javascript 为什么我的HTML文件有时只能正确加载？

javascript html

Javascript 为什么我的HTML文件有时只能正确加载？,javascript,html,Javascript,Html,我正在尝试使用原始HTML/javascript制作一个小网页。以下是我的HTML文件的全部当前内容： <!DOCTYPE html> <html> <head> <title>My website</title> <style> * { margin: 0px; padding: 0px; }

我正在尝试使用原始HTML/javascript制作一个小网页。以下是我的HTML文件的全部当前内容：

<!DOCTYPE html>
<html>
    <head>
        <title>My website</title>
        <style>
        * {
           margin: 0px;
           padding: 0px;
        }

        div.banner-light {
            background-color:#9090d0;
            position: absolute;
            left:0px;
        }

        div.banner-dark {
            background-color:#8080e0;
            position: absolute;
            left:0px;
        }
        </style>
    </head>

    <body onload="javascript:onLoadBody()">

    <script>
        function onLoadBody() {
            var curHeight = 0;
            for (var i = 1; i < 25; i++) {
                document.getElementById("stat" + i.toString()).style.top = curHeight.toString() + "px";
                document.getElementById("stat" + i.toString()).style.width = (screen.availWidth * 0.15).toString() + "px";
                document.getElementById("stat" + i.toString()).style.height = ((window.innerHeight - curHeight) / (25 - i)).toString() + "px";

                curHeight += ((window.innerHeight - curHeight) / (25 - i));
            }
        }

        function clickDiv(id) {
            document.getElementById("stat" + id).innerHTML = "Clicked";
        }
    </script>

    <div id='stat1' class="banner-light" onclick="javascript:clickDiv(1)"><center>1</center></div>
    <div id='stat2' class="banner-dark" onclick="javascript:clickDiv(2)"><center>2</center></div>
    <div id='stat3' class="banner-light" onclick="javascript:clickDiv(3)"><center>3</center></div>
    <div id='stat4' class="banner-dark" onclick="javascript:clickDiv(4)"><center>4</center></div>
    <div id='stat5' class="banner-light" onclick="javascript:clickDiv(5)"><center>5</center></div>
    <div id='stat6' class="banner-dark" onclick="javascript:clickDiv(6)"><center>6</center></div>
    <div id='stat7' class="banner-light" onclick="javascript:clickDiv(7)"><center>7</center></div>
    <div id='stat8' class="banner-dark" onclick="javascript:clickDiv(8)"><center>8</center></div>
    <div id='stat9' class="banner-light" onclick="javascript:clickDiv(9)"><center>9</center></div>
    <div id='stat10' class="banner-dark" onclick="javascript:clickDiv(10)"><center>10</center></div>
    <div id='stat11' class="banner-light" onclick="javascript:clickDiv(11)"><center>11</center></div>
    <div id='stat12' class="banner-dark" onclick="javascript:clickDiv(12)"><center>12</center></div>
    <div id='stat13' class="banner-light" onclick="javascript:clickDiv(13)"><center>13</center></div>
    <div id='stat14' class="banner-dark" onclick="javascript:clickDiv(14)"><center>14</center></div>
    <div id='stat15' class="banner-light" onclick="javascript:clickDiv(15)"><center>15</center></div>
    <div id='stat16' class="banner-dark" onclick="javascript:clickDiv(16)"><center>16</center></div>
    <div id='stat17' class="banner-light" onclick="javascript:clickDiv(17)"><center>17</center></div>
    <div id='stat18' class="banner-dark" onclick="javascript:clickDiv(18)"><center>18</center></div>
    <div id='stat19' class="banner-light" onclick="javascript:clickDiv(19)"><center>19</center></div>
    <div id='stat20' class="banner-dark" onclick="javascript:clickDiv(20)"><center>20</center></div>
    <div id='stat21' class="banner-light" onclick="javascript:clickDiv(21)"><center>21</center></div>
    <div id='stat22' class="banner-dark" onclick="javascript:clickDiv(22)"><center>22</center></div>
    <div id='stat23' class="banner-light" onclick="javascript:clickDiv(23)"><center>23</center></div>
    <div id='stat24' class="banner-dark" onclick="javascript:clickDiv(24)"><center>24</center></div>

    </body>
</html>


我的网站
* {
边际：0px；
填充：0px；
}
副灯{
背景色：#9090d0；
位置：绝对位置；
左：0px；
}
暗色旗{
背景色：#8080e0；
位置：绝对位置；
左：0px；
}
函数onLoadBody（）{
var-curHeight=0；
对于（变量i=1；i<25；i++）{
document.getElementById（“stat”+i.toString（））.style.top=curHeight.toString（）+“px”；
document.getElementById（“stat”+i.toString（））.style.width=（screen.availWidth*0.15）.toString（）+“px”；
document.getElementById（“stat”+i.toString（））.style.height=（（window.innerHeight-curHeight）/（25-i））.toString（）+“px”；
curHeight+=（（window.innerHeight-curHeight）/（25-i））；
}
}
函数clickDiv（id）{
document.getElementById（“stat”+id）.innerHTML=“Clicked”；
}
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

奇怪的是，当我试图在浏览器中查看此文件时，它有时会完全按照我的要求加载—页面左侧的数字1到24，背景交替。但是，大约5次中有4次，所有的数字都会聚集在左上角，表明有错误（自己试试看）

奇怪的是，您可以在不编辑的情况下打开这个文件10次，并且它只在几个实例中正常工作。我甚至不认为这是可能的，但这肯定违背了我作为程序员所知道的一切。如果你知道任何可能导致这种情况的事情，请告诉我。顺便说一句，请原谅我可能做得不好的任何事情，因为我是新来的，并且自学了这一点

Edit：在讨论了一些关于HTML、JS和CSS顺序的建议解决方案后，我意识到我上面的代码有多么复杂：我没有使用onload，而是将div的样式宽度和高度设置为百分比。谢谢大家

尝试将您的

脚本标签（和内容）移动到下方的所有div，就在正文标签的末尾之前。这样可以确保在调用函数时创建DOM元素。看起来那里肯定会发生什么事。您还应该考虑删除内联事件定义
这里有一个
这里有一个建议，你不应该以你自己的方式做事。拥有绝对元素会将它们放置在屏幕上，但它们不会占用空间。这就像把一个立方体扔进一杯水中。水位将上升。当立方体是“绝对”时，它不会这样做。因此，您必须使div相对，然后它们将按照您想要的方式堆叠在彼此的顶部
    * {
        margin: 0px;
        padding: 0px;
    }
    div {
        height: 20px;
        position: relative;
    }
    div.banner-light {
        background-color: #9090d0;
        left: 0px;
    }
    div.banner-dark {
        background-color: #8080e0;
        left: 0px;
    }


  window.onload = function () {


      var curHeight = window.innerHeight;
      console.log(curHeight);
      for (var i = 1; i < 25; i++) {
          document.getElementById("stat" + i.toString()).style.width = (screen.availWidth * 0.15).toString() + "px";
          document.getElementById("stat" + i.toString()).style.height = (curHeight / (25 - 1)).toString() + "px";

      }

  }

  function clickDiv(id) {
      document.getElementById("stat" + id).innerHTML = "Clicked";
  }

*{
边际：0px；
填充：0px；
}
div{
高度：20px；
位置：相对位置；
}
副灯{
背景色：#9090d0；
左：0px；
}
暗色旗{
背景色：#8080e0；
左：0px；
}
window.onload=函数（）{
var curHeight=window.innerHeight；
控制台日志（curHeight）；
对于（变量i=1；i<25；i++）{
document.getElementById（“stat”+i.toString（））.style.width=（screen.availWidth*0.15）.toString（）+“px”；
document.getElementById（“stat”+i.toString（））.style.height=（curHeight/（25-1））.toString（）+“px”；
}
}
函数clickDiv（id）{
document.getElementById（“stat”+id）.innerHTML=“Clicked”；
}

使div成为相对的，只控制其宽度
编辑-使高度适应屏幕高度：
为了使div的高度与屏幕高度相适应，您的数学计算有点错误。你应该先看一下窗户的高度，然后把它除以24
我已经修改了上面的代码和小提琴

请注意，您在调整窗口大小时会遇到问题。字体大小也不适合。所以这个解决方案是否真的有用取决于你。
这里还有一把小提琴，它解决了调整尺寸的问题
随意调整大小：
还要注意的是，给你的女主角上类似的课可以让事情变得更聪明。您可以添加多个类，而不仅仅是一个类。ie

还有一种甚至可以调整字体大小的方法：
使用$（document）。准备好了吗（好主意，但恐怕没有什么不同。你有没有试过把脚本
标记移到头部
中？这样当主体调用它时，它就可以使用了。
？我把代码做了一点修改，作为一个建议，并把它放在这里：嗯，这已经解决了问题，但我想把横幅放在切换到用户屏幕的全高，而不是固定高度。在JS中更改他们的高度会导致随机故障问题再次出现。我将进一步处理它。我已使用新的小提琴编辑了答案。希望这将帮助您更好地理解问题。