Question

我一直在研究一个演示算术序列的项目。用户输入序列的起始项，差异以及要生成的项数，然后代码将生成序列。我想将每个术语放在这样的块中：

但是，上面显示的示例是硬编码版本。我希望序列可以自己生成，并且可以由用户自定义。但是，我遇到了一个问题：生成的新块替换了旧块。我有什么办法生成新的而不是替换它们？

代码：

var t0, difference, boxedNums, numOfTerms, redCircle, redTriangle, redRectangle, blueCircle, blueTriangle, blueRectangle;
redCircle = "<img src='imgs/negativeOne.png'>";
redTriangle = "<img src='imgs/negativeTen.png'>";
redRectangle = "<img src='imgs/negativeHundred.png'";
blueCircle = "<img src='imgs/one.png'";
blueTriangle = "<img src='imgs/ten.png'";
blueRectangle = "img src='imgs/hundred.png'";

function genTn() {
  t0 = document.getElementById("t0").value;
  difference = document.getElementById("d").value;
  numOfTerms = document.getElementById("tn").value;
  var tn;
  document.getElementById('buildButton').style.display = 'none';
  for (n = 0; n < numOfTerms; n++) {
    tn = t0 * 1 + difference * n;
    setTimeout(buildNextOne, 1500 * n, n, tn);
  }
  setTimeout(showButton, 1500 * numOfTerms);
}

function buildNextOne(n, tn) {
  // console.log('t' + n + " = " + tn);
  document.getElementById("boxArea").innerHTML = '<div class="col-sm-4 col-md-2"><span id="boxed" class="center">t<sub>' + n + '</sub><span class="tn">' + tn + '</span></span></div>'
}

function showButton() {
  document.getElementById('buildButton').style.display = '';
}

.center {
  text-align: center;
}

#constantsControl {
  background-color: palegreen;
  border-radius: 10%;
}

#equation {
  background-color: yellow;
  text-align: center;
  border-radius: 10%;
}

body {
  background-color: lightblue;
}

#formula {
  background-color: yellow;
}

span {
  display: block;
}

#boxed {
  border: 1px solid;
}

.tn {
  font-size: 3em;
}

#invisible {
  visibility: hidden;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">

  <title>Assignment 10a2</title>
</head>

<body>
  <div id="formula">
    Formula: <br> t
    <sub>n</sub> = t<sub>0</sub> + d*n <br>
    <br> t
    <sub>0</sub>
    <input type="range" min="-50" max="50" value="0" id="t0" class="slider">
    <br> d
    <input type="range" min="-50" max="50" value="0" id="d" class="slider">
    <br> n
    <input type="range" min="1" max="20" value="10" id="tn" class="slider">
    <br>
    <button id="buildButton" style="display:''" type="button" class="btn btn-warning" onclick="genTn()">Generate</button>
  </div>

  <br>

  <div class="container">
    <div class="row" id="boxArea">
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="10a2.js"></script>
</body>

Answer 1

这将在旧框旁边添加新框。在buildNextOne（）函数中进行的更改。

var t0, difference, boxedNums, numOfTerms, redCircle, redTriangle, redRectangle, blueCircle, blueTriangle, blueRectangle;
redCircle = "<img src='imgs/negativeOne.png'>";
redTriangle = "<img src='imgs/negativeTen.png'>";
redRectangle = "<img src='imgs/negativeHundred.png'";
blueCircle = "<img src='imgs/one.png'";
blueTriangle = "<img src='imgs/ten.png'";
blueRectangle = "img src='imgs/hundred.png'";

function genTn() {
  t0 = document.getElementById("t0").value;
  difference = document.getElementById("d").value;
  numOfTerms = document.getElementById("tn").value;
  var tn;
  document.getElementById('buildButton').style.display = 'none';
  for (n = 0; n < numOfTerms; n++) {
    tn = t0 * 1 + difference * n;
    setTimeout(buildNextOne, 1500 * n, n, tn);
  }
  setTimeout(showButton, 1500 * numOfTerms);
}

function buildNextOne(n, tn) {
 
  
  var nodediv=document.createElement("div");
  
  nodediv.setAttribute('style','col-md-2; margin-right: 10px;');
  nodediv.innerHTML='<span id="boxed" class="center">t<sub>' + n + '</sub><span class="tn">' + tn + '</span></span>';
  document.getElementById("boxArea").appendChild(nodediv);
}

function showButton() {
  document.getElementById('buildButton').style.display = '';
}

.center {
  text-align: center;
}

#constantsControl {
  background-color: palegreen;
  border-radius: 10%;
}

#equation {
  background-color: yellow;
  text-align: center;
  border-radius: 10%;
}

body {
  background-color: lightblue;
}

#formula {
  background-color: yellow;
}

span {
  display: block;
}

#boxed {
  border: 1px solid;
}

.tn {
  font-size: 3em;
}

#invisible {
  visibility: hidden;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">

  <title>Assignment 10a2</title>
</head>

<body>
  <div id="formula">
    Formula: <br> t
    <sub>n</sub> = t<sub>0</sub> + d*n <br>
    <br> t
    <sub>0</sub>
    <input type="range" min="-50" max="50" value="0" id="t0" class="slider">
    <br> d
    <input type="range" min="-50" max="50" value="0" id="d" class="slider">
    <br> n
    <input type="range" min="1" max="20" value="10" id="tn" class="slider">
    <br>
    <button id="buildButton" style="display:''" type="button" class="btn btn-warning" onclick="genTn()">Generate</button>
  </div>

  <br>

  <div class="container">
    <div class="row" id="boxArea">
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="10a2.js"></script>
</body>

如何在我创建的原始盒子旁边创建一个新盒子？

1 个答案: