<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生js点击input弹出时间选择器</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
text-align: center;
color: #333;
font-size: 24px;
margin-bottom: 20px;
}
.input-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #555;
}
input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}
input:focus {
outline: none;
border-color: #4a90e2;
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}
.time-picker {
position: absolute;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 100;
display: none;
}
.time-picker.show {
display: block;
}
.time-picker .time-selector {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.time-picker select {
padding: 5px;
border: 1px solid #ddd;
border-radius: 4px;
}
.time-picker .buttons {
display: flex;
justify-content: flex-end;
}
.time-picker button {
padding: 5px 10px;
margin-left: 5px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.time-picker .cancel {
background-color: #f0f0f0;
}
.time-picker .confirm {
background-color: #4a90e2;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>Time Picker Demo</h1>
<div class="input-group">
<label for="time-input">Select Time:</label>
<input type="text" id="time-input" readonly placeholder="Click to select time">
</div>
</div>
<div class="time-picker" id="time-picker">
<div class="time-selector">
<select id="hours">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
<span>:</span>
<select id="minutes">
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
</div>
<div class="buttons">
<button class="cancel" id="cancel-btn">Cancel</button>
<button class="confirm" id="confirm-btn">OK</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const timeInput = document.getElementById('time-input');
const timePicker = document.getElementById('time-picker');
const hoursSelect = document.getElementById('hours');
const minutesSelect = document.getElementById('minutes');
const cancelBtn = document.getElementById('cancel-btn');
const confirmBtn = document.getElementById('confirm-btn');
// Position the time picker below the input
function positionTimePicker() {
const inputRect = timeInput.getBoundingClientRect();
timePicker.style.top = (inputRect.bottom + window.scrollY + 5) + 'px';
timePicker.style.left = (inputRect.left + window.scrollX) + 'px';
}
// Show time picker
timeInput.addEventListener('click', function(e) {
positionTimePicker();
timePicker.classList.add('show');
e.stopPropagation();
});
// Hide time picker when clicking outside
document.addEventListener('click', function() {
timePicker.classList.remove('show');
});
// Prevent time picker from closing when clicking inside it
timePicker.addEventListener('click', function(e) {
e.stopPropagation();
});
// Cancel button
cancelBtn.addEventListener('click', function() {
timePicker.classList.remove('show');
});
// Confirm button
confirmBtn.addEventListener('click', function() {
const hours = hoursSelect.value;
const minutes = minutesSelect.value;
timeInput.value = `${hours}:${minutes}`;
timePicker.classList.remove('show');
});
// Set current time as default
const now = new Date();
const currentHours = now.getHours().toString().padStart(2, '0');
const currentMinutes = Math.floor(now.getMinutes() / 5) * 5;
const formattedMinutes = currentMinutes.toString().padStart(2, '0');
hoursSelect.value = currentHours;
minutesSelect.value = formattedMinutes;
timeInput.value = `${currentHours}:${formattedMinutes}`;
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
