Question

我对JavaScript知之甚少，但就像我所做的一切一样，我将自己置身于一些复杂的代码中（至少我认为它很复杂）。该代码基本上设计为适合尽可能多（约）300x200的图像到称为＆＃34;超级容器＆＃34;的div中。一个名为＆＃34; container＆＃34;应该被创建，然后这应该填充图像。图像将稍微调整大小以使其更美观，并且还计算行数和列数。我并不那么关心计算图像（或盒子）的数量，大小或位置的逻辑是如何工作的，因为我认为这是合理的。我更关心我的语法和javascript语言本身的使用，因为目前没有显示任何内容。＆＃39;设置框＆＃39;函数在我的index.php＆＃39;中调用。而且我很确定我无法做错。

见下面的.js代码：

function setupboxes() {
    var stdbw=300; //standard box width
    var stdbh=200; //standard box height
    var w=document.getElementById("containerparent").clientWidth; //get width of containerparent
    var h=document.getElementById("containerparent").clientHeight; //get height of containerparent
    var b=10; //set containerparent padding
    var p=b; //set box padding

if(w>999) {
        b=20; //set containerparent padding to 20px if screen width over 999px
        p=b; //set box padding to 20px if screen width over 999px 
 } 
    var nrcols=Math.round((w-2*b)/(stdbw+2*p)); //set integer for nr of columns
    var nrrows=Math.round((h-2*b)/(stdbh+2*p)); //set integer for nr of rows
    var nrboxes=nrcols*nrrows; //calculate nr of boxes
    var bh=(((h-2*b)/nrrows)-2*p); //set box height
    var bw=(((w-s*b)/nrcols)-2*p); //set box width
    var top=(h-(nrcols*(bh+2*p))); //set distance of container from top of containerparent
    var left=(w-(nrrows*(bw+2*p))); //set distance of container from left of containerparent
    var conth=((nrcols*(bh+2*p))+2*b); //set height of container
    var contw=((nrrows*(bw+2*p))+2*b); //set width of container
    var divcont=document.getElementById('containerparent').insertAdjacentHTML('afterbegin', '<div id="container"></div>');  //create container
    divcont.style.position = 'relative';
    divcont.style.top = top;
    divcont.style.left = left;
    divcont.style.border = 'red 1px solid';

    var nrboxesit=nrboxes;
    var boxnr=1;

    while(nrboxesit>0){ //create boxes
        document.getElementById('container').insertAdjacentHTML('beforeend', '<img src="images/0000001.jpg">');
        img.style.padding = p;
        img.style.height = bh;
        img.style.width = bw;
        boxnr=boxnr+1;
        nrboxesit=nrboxesit-1;  
    }
 }

就像我说我是JavaScript的新手所以请不要假设我会尝试一些简单的修复！

提前致谢。

Answer 1

我进行了最小数量的更改以显示图像。具体来说，我不知道＆＃39; s＆＃39;我愿意，所以我把它等于10。

在尝试向其中插入HTML之前，

divcont已分配给该元素。

接近结尾的

img未定义，我分配了一个id并将其用作参考。也许你不想浪费地分配这样的ID。

＆＃13;

 function setupboxes() {
   var stdbw = 300; //standard box width
   var stdbh = 200; //standard box height
   var w = document.getElementById("containerparent").clientWidth; //get width of containerparent
   var h = document.getElementById("containerparent").clientHeight; //get height of containerparent
   var b = 10; //set containerparent padding
   var p = b; //set box padding

   // FIXME
   var s = 10;

   if (w > 999) {
     b = 20; //set containerparent padding to 20px if screen width over 999px
     p = b; //set box padding to 20px if screen width over 999px 
   }
   var nrcols = Math.round((w - 2 * b) / (stdbw + 2 * p)); //set integer for nr of columns
   var nrrows = Math.round((h - 2 * b) / (stdbh + 2 * p)); //set integer for nr of rows

   var nrboxes = nrcols * nrrows; //calculate nr of boxes
   var bh = (((h - 2 * b) / nrrows) - 2 * p); //set box height
   var bw = (((w - s * b) / nrcols) - 2 * p); //set box width
   var top = (h - (nrcols * (bh + 2 * p))); //set distance of container from top of containerparent
   var left = (w - (nrrows * (bw + 2 * p))); //set distance of container from left of containerparent
   var conth = ((nrcols * (bh + 2 * p)) + 2 * b); //set height of container
   var contw = ((nrrows * (bw + 2 * p)) + 2 * b); //set width of container

   // FIXME
   var divcont = document.getElementById('containerparent');
   divcont.insertAdjacentHTML('afterbegin', '<div id="container"></div>'); //create container

   divcont.style.position = 'relative';
   divcont.style.top = top;
   divcont.style.left = left;
   divcont.style.border = 'red 1px solid';

   var nrboxesit = nrboxes;
   var boxnr = 1;

   while (nrboxesit > 0) { //create boxes

     // USED PLACEHOLDER IMAGE HERE

     document.getElementById('container').insertAdjacentHTML('beforeend', '<img id="myBox' + nrboxesit + '" src="http://lorempixel.com/300/200/">');

     // FIXME img is undefined. I just added an id based on
     // current iteration of box number 
     var img = document.getElementById('myBox' + nrboxesit);
     img.style.padding = p;
     img.style.height = bh;
     img.style.width = bw;
     boxnr = boxnr + 1;
     nrboxesit = nrboxesit - 1;
   }
 }

 setupboxes();

＆＃13;

    <div style="display: inline-block; width: 600px; height: 600px;" id="containerparent">
        <div style="display: inline-block; width: 600px; height: 600px;" id="container">
        </div>
    </div>

＆＃13;

这个div＆amp;有什么问题？图片创建JavaScript代码？

1 个答案: