1

我正在尝试使用原始 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>

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

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

编辑：在弄乱了一些关于我的 HTML、JS 和 CSS 顺序的建议解决方案之后，我意识到上面的代码是多么令人费解：我没有使用 onload，而是将 div 的样式宽度和高度设置为百分比。总之谢谢大家！

4

2 回答 2

0

尝试将script标签（和内容）移动到所有 div 的下方，就在body标签末尾之前。这样可以确保在调用函数时创建 DOM 元素。似乎那里肯定会发生一些事情。您还应该考虑删除您的内联事件定义。

这是一个jsfiddle 示例，其中在正文底部定义了脚本

这是一个jsfiddle 示例 onLoad

于 2013-04-13T02:22:57.583 回答
0

你不应该以你的方式做事。拥有绝对元素会将它们放在屏幕上，但它们在物理上不会占用空间。这就像在一杯水中扔一个立方体。水位会上升。当立方体是“绝对的”时，它不会那样。因此，您必须使 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";
  }

让你的 div 相对，只控制它们的宽度。

编辑 - 使高度适应屏幕高度：

为了使 div 的高度适应屏幕高度，你的数学有点错误。您应该读取窗口的高度，然后将其除以 24。

我已经适应了上面的代码以及小提琴。

http://jsfiddle.net/djwave28/Ap4Sq/5/

请注意，人们会在调整窗口大小时遇到​​问题。字体大小也不适应。所以这个解决方案是否真的有用取决于你。这也是一个解决调整大小的小提琴。

调整大小：http: //jsfiddle.net/djwave28/Ap4Sq/6/

另请注意，通过为您的 div 提供类似的类，您可以使事情变得更聪明。您可以添加更多的类，而不仅仅是一个。IE<div class="class1 class2 class3"></div>

还有一个甚至可以调整字体大小：http: //jsfiddle.net/Ap4Sq/8/

于 2013-04-13T02:28:42.797 回答