Question

我正在尝试让我的代码在一个框内随机放置50个随机颜色的圆圈或“五彩纸屑”。到目前为止，所有出现的都是盒子左上角的一个黑色圆圈。

"use strict";

window.onload = function() {
    document.onclick = create;
};

function trim(data) {
    var start;
    var whitespace;
    var end;
    var result;

    if (typeof data === "string") {
        whitespace = " \n\r\t\f";
        start = 0;
    } else {
        result = data;
    }

    while ((start < data.length) && (whitespace.indexOf(data.charAt(start)))) {
        start = start + 1;
    };
    end = data.length - 1;

    while ((end >= 0) && (whitespace.indexOf(data.charAt(end)))) {
        end = end - 1;
    };

    if (end < start) {
        result = "";
    } else {
        result = data.substring(1 + start, end);
    }
    return result;
};


function getRandomInteger(upperLimit) {
    return Math.floor(Math.random() * (upperLimit + 1));
};

function getRandomRGB() {
    var blue;
    var green;
    var red;
    red = getRandomInteger(255);
    blue = getRandomInteger(255);
    green = getRandomInteger(255);
    return "rgb(" + red + "," + green + "," + blue + ")";
};

function createHTMLElement(elementType, id, classInfo, content) {
    if (elementType === null) {
        elementType = "";
    };

    trim(elementType);

    if (id === null) {
        id = "";
    }

    trim(id);

    if (id.length > 0) {
        id = " " + "id=" + '"' + id + '"' + " ";
    };

    if (classInfo === null) {
        classInfo = "";
    }

    trim(classInfo);

    if (classInfo.length > 0) {
        classInfo = " " + "class=" + '"' + classInfo + '"';
    }

    if (content === null) {
        content = "";
    };

    trim(content);

    return '<' + elementType +
        id + classInfo +
        '>' + content +
        '</' + elementType + '>';
};

function createConfetti(containerId, howMany) {
    var element;
    var i;
    var idPrefix;
    var result;


    result = "";
    idPrefix = "circles";
    i = 0;
    element = document.getElementById(idPrefix + i);
    while (i < howMany) {
        result = result + createHTMLElement("span", idPrefix + i, "confetti", "&bull;");
        i = i + 1;
    } //while

    document.getElementById(containerId).innerHTML = result;


    while (i < howMany) {
        document.getElementById(idPrefix + i).style.color = getRandomRGB();
        document.getElementById(idPrefix + i).style.top = getRandomInteger(offsetHeight - 4) + "px";
        document.getElementById(idPrefix + i).style.left = getRandomInteger(offsetWidth - 4) + "px";
        i = i + 1;
    } //while
};

function create() {
    createConfetti("container", 50);
};

{
  border: 0;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Times New Roman", serif;
  font-size: 12pt;
}
#container {
  border: 2px solid black;
  height: 10em;
  line-height: .9em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 30em;
}
.confetti {
  font-size: 3em;
  position: absolute;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <title>Confetti Part 1</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>

<body>
  <div id=container></div>
</body>

</html>

Answer 1

有什么东西

idPrefix = "circles";
    i      = 0;
    element = document.getElementById( idPrefix+i );
    while( i < howMany )
    {
    result=result+createHTMLElement("span", idPrefix+i, "confetti", "&bull;");
    i = i+1;
    }//while
    document.getElementById(containerId).innerHTML=result;

此时，i = 50，并且不会进入下一个循环

    while( i < howMany )
    {

Answer 2

您有两个问题：

对两个循环使用相同的变量（i）。但你不会把我重置为零。其次，您只需引用offsetHeight和offsetWidth。我假设你的意思是容器的宽度和高度？因此，您更新的代码应如下所示：

  i=0;
  while (i < howMany) {
    document.getElementById(idPrefix + i).style.color = getRandomRGB();
    document.getElementById(idPrefix + i).style.top = getRandomInteger(document.getElementById(containerId).offsetHeight - 4) + "px";
    document.getElementById(idPrefix + i).style.left = getRandomInteger(document.getElementById(containerId).offsetWidth - 4) + "px";
    i = i + 1;
  } //while

"use strict";

window.onload = function() {
  document.onclick = create;
};

function trim(data) {
  var start;
  var whitespace;
  var end;
  var result;

  if (typeof data === "string") {
    whitespace = " \n\r\t\f";
    start = 0;
  } else {
    result = data;
  }

  while ((start < data.length) && (whitespace.indexOf(data.charAt(start)))) {
    start = start + 1;
  };
  end = data.length - 1;

  while ((end >= 0) && (whitespace.indexOf(data.charAt(end)))) {
    end = end - 1;
  };

  if (end < start) {
    result = "";
  } else {
    result = data.substring(1 + start, end);
  }
  return result;
};


function getRandomInteger(upperLimit) {
  return Math.floor(Math.random() * (upperLimit + 1));
};

function getRandomRGB() {
  var blue;
  var green;
  var red;
  red = getRandomInteger(255);
  blue = getRandomInteger(255);
  green = getRandomInteger(255);
  return "rgb(" + red + "," + green + "," + blue + ")";
};

function createHTMLElement(elementType, id, classInfo, content) {
  if (elementType === null) {
    elementType = "";
  };

  trim(elementType);

  if (id === null) {
    id = "";
  }

  trim(id);

  if (id.length > 0) {
    id = " " + "id=" + '"' + id + '"' + " ";
  };

  if (classInfo === null) {
    classInfo = "";
  }

  trim(classInfo);

  if (classInfo.length > 0) {
    classInfo = " " + "class=" + '"' + classInfo + '"';
  }

  if (content === null) {
    content = "";
  };

  trim(content);

  return '<' + elementType +
    id + classInfo +
    '>' + content +
    '</' + elementType + '>';
};

function createConfetti(containerId, howMany) {
  var element;
  var i;
  var idPrefix;
  var result;


  result = "";
  idPrefix = "circles";
  i = 0;
  element = document.getElementById(idPrefix + i);
  while (i < howMany) {
    result = result + createHTMLElement("span", idPrefix + i, "confetti", "&bull;");
    i = i + 1;
  } //while

  document.getElementById(containerId).innerHTML = result;

  i=0;
  while (i < howMany) {
    document.getElementById(idPrefix + i).style.color = getRandomRGB();
    document.getElementById(idPrefix + i).style.top = getRandomInteger(document.getElementById(containerId).offsetHeight - 4) + "px";
    document.getElementById(idPrefix + i).style.left = getRandomInteger(document.getElementById(containerId).offsetWidth - 4) + "px";
    i = i + 1;
  } //while
};

function create() {
  createConfetti("container", 50);
};

<!DOCTYPE html>

<html lang="en">

<head>
  <title>Confetti Part 1</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <script src="ConfettiPart1.js" type="text/javascript"></script>
  <style type="text/css">
    {
      border: 0;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: "Times New Roman", serif;
      font-size: 12pt;
    }
    #container {
      border: 2px solid black;
      height: 10em;
      line-height: .9em;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      width: 30em;
    }
    .confetti {
      font-size: 3em;
      position: absolute;
    }
  </style>
</head>

<body>
  <div id=container></div>
</body>

</html>

在Javascript中的五彩纸屑

2 个答案: