Question

我有一个创建随机计划的功能。单击按钮，我想重置所有值并重新创建另一个计划。我没有将所有元素重新初始化为原始值，而是发现重新加载页面更容易。当我有两个单独的按钮，一个生成，一个计划和一个重新加载，这是完美的。

但是，我需要一个按钮来执行这两个操作，但是当我在函数开头调用reload时，计划会被填充并自动重新加载。

function generateSchedule() {

    window.location.reload();

    for (var i = 0; exams_scheduled.length < TOTAL_EXAMS; i++){

        var time = randomNumber(3); // 3 exam timeslots per day
        var day = randomNumber(6); // 6 exam days per week
        var week = randomNumber(2); // 2 week period

        var weekday = day + '' + week; 
        var exam_id = "exam-" + time + '' + weekday; 

    if ((exam_count[weekday] < EXAMS_PER_DAY) && (!exams_scheduled.includes(exam_id))) {
        exam_count[weekday] += 1;
        exams_scheduled.push(exam_id);

        document.getElementById(exam_id).className += "exam";   
    }
  }  
}

这是一个在生成函数开头调用reload的codepen。如您所见，生成计划并再次自动重新加载。

http://codepen.io/skyro/pen/apQwWY

有人可以提出解决方案吗？

Answer 1

从我能理解的是，您希望按钮重新加载您的页面，但就在它之后它会调出新的时间表，是吗？如果是这样，您可以使用计划中的window.onload，以便在页面加载后立即自动召唤它？或者可能... setTimeout(callNewSchedule, 100)函数会很有用只需设置触发按钮时的延迟即可。怀疑这会起作用。因为该页面重新加载它会丢失以前的所有数据，setTimeout函数永远不会发生。因此onload是此问题的最佳选择。

Answer 2

花了一段时间，但似乎有效。您现在不必重新加载页面以获取新值。

＆＃13;

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const EXAMS_PER_DAY = 2;
const TOTAL_EXAMS = 5;

var exam_days = {
  00: 0,
  10: 0,
  20: 0,
  30: 0,
  40: 0,
  50: 0,
  01: 0,
  11: 0,
  21: 0,
  31: 0,
  41: 0,
  51: 0
};

var exam_array = [];

function generateSchedule() {
  exam_array = [];
  var c = [[0,1,2],[0,1,2,3,4,5],[0,1]];
  
  for (var i = 0; i < c[0].length; i++) {
    for (var j = 0; j < c[1].length; j++) {
      for (var k = 0; k < c[2].length; k++) {
        b = `${c[0][i]}${c[1][j]}${c[2][k]}`;
        document.getElementById('exam-' + b).style.background = 'transparent';
      }
    }
  }

  for (var i = 0; exam_array.length < TOTAL_EXAMS; i++) {

    var time = getRandomInt(0, 2);
    var day = getRandomInt(0, 5);
    var week = getRandomInt(0, 1);

    var exam_id = "exam-" + time + day + week;
    if (exam_days[day + '' + week] < EXAMS_PER_DAY && !exam_array.includes(exam_id)) {
      exam_days[day + '' + week] += 1;
      exam_array.push(exam_id);
      document.getElementById(exam_id).style.background = "green";
    }
  }
}

＆＃13;

table,
th,
td {
  border: 1px solid black;
}

＆＃13;

<table>
  <tr>
    <th></th>
    <th scope="col">M</th>
    <th scope="col">T</th>
    <th scope="col">W</th>
    <th scope="col">R</th>
    <th scope="col">F</th>
    <th scope="col">S</th>
  </tr>
  <tr>
    <th scope="row">Morning</th>
    <td id="exam-000"></td>
    <td id="exam-010"></td>
    <td id="exam-020"></td>
    <td id="exam-030"></td>
    <td id="exam-040"></td>
    <td id="exam-050"></td>
  </tr>
  <tr>
    <th scope="row">Afternoon</th>
    <td id="exam-100"></td>
    <td id="exam-110"></td>
    <td id="exam-120"></td>
    <td id="exam-130"></td>
    <td id="exam-140"></td>
    <td id="exam-150"></td>
  </tr>
  <tr>
    <th scope="row">Evening</th>
    <td id="exam-200"></td>
    <td id="exam-210"></td>
    <td id="exam-220"></td>
    <td id="exam-230"></td>
    <td id="exam-240"></td>
    <td id="exam-250"></td>
  </tr>
</table>
<table>
  <tr>
    <th></th>
    <th scope="col">M</th>
    <th scope="col">T</th>
    <th scope="col">W</th>
    <th scope="col">R</th>
    <th scope="col">F</th>
    <th scope="col">S</th>
  </tr>
  <tr>
    <th scope="row">Morning</th>
    <td id="exam-001"></td>
    <td id="exam-011"></td>
    <td id="exam-021"></td>
    <td id="exam-031"></td>
    <td id="exam-041"></td>
    <td id="exam-051"></td>
  </tr>
  <tr>
    <th scope="row">Afternoon</th>
    <td id="exam-101"></td>
    <td id="exam-111"></td>
    <td id="exam-121"></td>
    <td id="exam-131"></td>
    <td id="exam-141"></td>
    <td id="exam-151"></td>
  </tr>
  <tr>
    <th scope="row">Evening</th>
    <td id="exam-201"></td>
    <td id="exam-211"></td>
    <td id="exam-221"></td>
    <td id="exam-231"></td>
    <td id="exam-241"></td>
    <td id="exam-251"></td>
  </tr>
</table>
<br />
<button onclick="generateSchedule();">Generate</button>
<button onclick="location.reload(true);">Reload</button>
<button onclick="window.print();">Print</button>

＆＃13;

Javascript - 需要在调用函数之前重置所有页面元素

2 个答案: