Question

我必须从HTML中的表单中提取输入数字并让它以某种方式显示。例如：用户输入训练周数= 2且训练天数= 3.使用Javascript我必须提示小时数并以某种方式显示。

<script>
        function trainingHours() {
            var weeks = parseInt(document.input.weeks.value);
            var days = parseInt(document.input.days.value);
            var getHours = 0;
            var lineHours = 0;
            var totalHours = 0;
            var outputP = document.getElementById("output1");
            outputP.innerHTML = "Po trained " + weeks + " weeks and he trained " + days + " days per week";

            for(var i = 1; i <= weeks; i++){
                for(var j = 1; j <= days; j++){
                    getHours = parseFloat(prompt("Enter the training hours for week " + i + " day " + j));

                    var outputDiv = document.getElementById("output");
                        outputDiv.innerHTML += "Week " + i + "training hours for day " + j + " = " + getHours + "<br>";
                }   

            }   

        }
    </script>

HTML

<body>
    <header>

    <h1 id="title">Weekly Training Log</h1>
    </header>
    <main>
        <form name="input" onsubmit="return false;">
            <label for="weeks">Number of weeks Po trained: </label>
            <input type="text"  name="weeks" id="weeks"><br>
            <label for="days">Number of days Po trained each week: </label>
            <input type="text"  name="days" id="days"><br>
            <button onclick="trainingHours();">Enter Po's weekly training hours</button>
        </form>

        <div id="output"><br></div>
    </main>
</body>

输出必须说：

第1周

培训时间.......

培训时间.......

培训时间........

第1周小计........

第1周最大的一天.........

第2周

训练时间................

训练时间..............

训练时间............

第1周小计...................

第1周最大的一天..............

培训总时数...................

我需要帮助让循环正确显示。我想在1 div中显示它。感谢

Answer 1

您可以使用数组：

for(var i = 1; i <= weeks; i++){
    var arrHours = [];
    for(var j = 1; j <= days; j++){
        getHours = parseFloat(prompt("Enter the training hours for week " + i + " day " + j));
        arrHours.push(getHours);
    }   
    var outputDiv = document.getElementById("output");
    outputDiv.innerHTML += "Week " + i + "<br />";
    outputDiv.innerHTML += arrHours.map(function(x, index) {
        return "Training hours for day " + (index + 1) + " = " + x + "<br>";
    }).join("<br />");
}

这样，使用数组方法很容易找到sum，min和max。

Answer 2

这是一个在输入过程中构建小计和总计的解决方案：

function trainingHours() {
  var weeks = +document.input.weeks.value;
  var days = +document.input.days.value;
  var getHours = 0;
  var subtotal, largestDayHours, largestDay;
  var totalHours = 0;
  var html = "Po trained " + weeks + " weeks and he trained " + days + " days per week<br>";

  for(var i = 1; i <= weeks; i++){
    html += 'Week ' + i + '<br>';
    subtotal = 0;
    largestDay = 0;
    largestDayHours = 0;
    for(var j = 1; j <= days; j++){
      getHours = +prompt("Enter the training hours for week " + i + " day " + j);
      subtotal += getHours;
      if (getHours > largestDayHours) {
        largestDayHours = getHours;
        largestDay = j;
      }
      html += "training hours for day " + j + " = " + getHours + "<br>";
    }
    html += "week " + i + " subtotal is " + subtotal + "<br>";
    html += "week " + i + " largest day training was " + largestDayHours + " hours, happened at day " + largestDay + "<br>";
    totalHours += subtotal;
  }
  html += "Total training hours over all weeks = " + totalHours;
  var outputDiv = document.getElementById("output");
  outputDiv.innerHTML = html;
}

<header>
  <h1 id="title">Weekly Training Log</h1>
</header>

<main>
  <form name="input" onsubmit="return false;">
    <label for="weeks">Number of weeks Po trained: </label>
    <input type="text"  name="weeks" id="weeks"><br>
    <label for="days">Number of days Po trained each week: </label>
    <input type="text"  name="days" id="days"><br>
    <button onclick="trainingHours();">Enter Po's weekly training hours</button>
  </form>

  <div id="output"><br></div>
</main>

Javascript循环分为2个部分

2 个答案: