js实现时间选择器

<label for="timePicker">选择时间:</label>
<input type="text" id="timePicker" readonly>

/* 样式可以根据需要进行调整 */
#timePicker {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

document.addEventListener('DOMContentLoaded', function() {
  const timePicker = document.getElementById('timePicker');

  // 创建一个时间选择器
  const timeSelect = document.createElement('select');
  for (let hour = 0; hour < 24; hour++) {
    const option = document.createElement('option');
    option.value = hour.toString().padStart(2, '0');
    option.textContent = hour.toString().padStart(2, '0') + ':00';
    timeSelect.appendChild(option);
  }

  // 将时间选择器添加到页面中
  timePicker.parentNode.insertBefore(timeSelect, timePicker);

  // 监听时间选择器的变化
  timeSelect.addEventListener('change', function() {
    timePicker.value = timeSelect.value;
  });
});