html和js如何时间选择器

来源：恒创科技编辑：恒创科技编辑部

2024-03-31 10:30:55

HTML和JS实现时间选择器

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>时间选择器</title>
</head>
<body>
    <input type="text" id="timePicker" readonly>
    <button onclick="showTimePicker()">选择时间</button>
    <script src="timePicker.js"></script>
</body>
</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 = <option value="${currentTime}">${currentTime}</option>;
    timePicker.parentNode.insertBefore(select, timePicker);
    timePicker.style.display = 'none';
}

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

本文地址：https://www.henghost.com/jishu/45918/