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'; }
现在,当你点击“选择时间”按钮时,将弹出一个包含当前时间和可选时间的下拉列表,你可以通过点击下拉列表中的选项来选择时间,所选时间将自动设置为输入框的值。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)