HTML和JS实现时间选择器

1. 使用HTML创建时间选择器

我们需要在HTML中创建一个输入框和一个按钮，输入框用于显示当前时间，按钮用于触发时间选择器弹出窗口。

    
    
    


    
    选择时间
    

2. 使用JavaScript实现时间选择器功能

接下来，我们需要编写JavaScript代码来实现时间选择器的功能，我们需要获取当前时间，并将其格式化为HH:mm格式，我们需要创建一个函数showTimePicker，当用户点击按钮时，该函数将被调用，在这个函数中，我们将弹出一个包含当前时间和可选时间的下拉列表，用户可以通过点击下拉列表中的选项来选择时间，我们需要将所选时间设置为输入框的值。

// 获取当前时间并格式化为HH:mm格式
function getCurrentTime() {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    return ${hours}:${minutes};
}
// 显示时间选择器
function showTimePicker() {
    const timePicker = document.getElementById('timePicker');
    const currentTime = getCurrentTime();
    timePicker.value = currentTime;
    // 创建下拉列表并设置初始值
    const select = document.createElement('select');
    select.value = currentTime;
    select.innerHTML = ${currentTime};
    timePicker.parentNode.insertBefore(select, timePicker);
    timePicker.style.display = 'none';
}

现在，当你点击“选择时间”按钮时，将弹出一个包含当前时间和可选时间的下拉列表，你可以通过点击下拉列表中的选项来选择时间，所选时间将自动设置为输入框的值。

网页名称：html和js如何时间选择器
网页网址：http://www.jxjierui.cn/article/dhpdeps.html