Question

如何在JavaScript中动态创建如下所示的时钟选项。这些时间选项应该是动态形成的，并且从函数返回，而函数输出嵌入在select包装器中。

<select>
  <option value="12:00 AM">12:00 AM</option>
  <option value="12:30 AM">12:30 AM</option>
  <option value="1:00 AM">1:00 AM</option>
  <option value="1:30 AM">1:30 AM</option>
  <option value="2:00 AM">2:00 AM</option>
  <option value="2:30 AM">2:30 AM</option>
  <option value="3:00 AM">3:00 AM</option>
  <option value="3:30 AM">3:30 AM</option>
  <option value="4:00 AM">4:00 AM</option>
  <option value="4:30 AM">4:30 AM</option>
  <option value="5:00 AM">5:00 AM</option>
  <option value="5:30 AM">5:30 AM</option>
  <option value="6:00 AM">6:00 AM</option>
  <option value="6:30 AM">6:30 AM</option>
  <option value="7:00 AM">7:00 AM</option>
  <option value="7:30 AM">7:30 AM</option>
  <option value="8:00 AM">8:00 AM</option>
  <option value="8:30 AM">8:30 AM</option>
  <option value="9:00 AM">9:00 AM</option>
  <option value="9:30 AM">9:30 AM</option>
  <option value="10:00 AM">10:00 AM</option>
  <option value="10:30 AM">10:30 AM</option>
  <option value="11:00 AM">11:00 AM</option>
  <option value="11:30 AM">11:30 AM</option>
  <option value="12:00 PM">12:00 PM</option>
  <option value="12:30 PM">12:30 PM</option>
  <option value="1:00 PM">1:00 PM</option>
  <option value="1:30 PM">1:30 PM</option>
  <option value="2:00 PM">2:00 PM</option>
  <option value="2:30 PM">2:30 PM</option>
  <option value="3:00 PM">3:00 PM</option>
  <option value="3:30 PM">3:30 PM</option>
  <option value="4:00 PM">4:00 PM</option>
  <option value="4:30 PM">4:30 PM</option>
  <option value="5:00 PM">5:00 PM</option>
  <option value="5:30 PM">5:30 PM</option>
  <option value="6:00 PM">6:00 PM</option>
  <option value="6:30 PM">6:30 PM</option>
  <option value="7:00 PM">7:00 PM</option>
  <option value="7:30 PM">7:30 PM</option>
  <option value="8:00 PM">8:00 PM</option>
  <option value="8:30 PM">8:30 PM</option>
  <option value="9:00 PM">9:00 PM</option>
  <option value="9:30 PM">9:30 PM</option>
  <option value="10:00 PM">10:00 PM</option>
  <option value="10:30 PM">10:30 PM</option>
  <option value="11:00 PM">11:00 PM</option>
  <option value="11:30 PM">11:30 PM</option>
</select>

Answer 1

以下是帮助您了解时间选择器的示例代码：

function populate(selector) {
  var select = $(selector);
  var hours, minutes, ampm;
  for (var i = 420; i <= 1320; i += 15) {
    hours = Math.floor(i / 60);
    minutes = i % 60;
    if (minutes < 10) {
      minutes = '0' + minutes; // adding leading zero
    }
    ampm = hours % 24 < 12 ? 'AM' : 'PM';
    hours = hours % 12;
    if (hours === 0) {
      hours = 12;
    }
    select.append($('<option></option>')
      .attr('value', i)
      .text(hours + ':' + minutes + ' ' + ampm));
  }
}

populate('#timeSelect');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="timeSelect"></select>

Answer 2

＆＃13;

function createTime(){
    var start = 11;
    var s = document.getElementById("timeSelect");
  
    for(var i = 0; i< 24; i++){
      var t = ((start + i) % 12 + 1) + ":00 ";
      var t2 = ((start + i) % 12 + 1) + ":30 ";

      t += Math.floor(i/12) === 0 ? "AM" : "PM";
      t2 += Math.floor(i/12) === 0 ? "AM" : "PM";
      
      let option = document.createElement('option');
      option.text = t
      option.value = t;
      
      let option2 = document.createElement('option');
      option2.text = t2
      option2.value = t2;

      s.append(option)
      s.append(option2)
  }
}

createTime();

＆＃13;

<select id="timeSelect" ></select>

＆＃13;

如何在javascript中动态创建时钟选项

2 个答案: