HTML 时间选择器代码示例 - 简单易用 - 常规

以下是一个简单的 HTML 时间选择器的代码示例，使用一个包含选项的下拉列表，其中每个选项都是一个 li 元素。当用户单击选择器时，下拉列表将显示或隐藏。当用户选择一个选项时，该选项将成为当前选择的时间，并显示在选择器中。

<!DOCTYPE html>
<html>
<head>
	<title>时间选择器</title>
	<meta charset="utf-8">
	<style>
		.container {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.label {
			margin-right: 10px;
		}
		.select {
			padding: 5px;
			border: 1px solid #ccc;
			border-radius: 3px;
			background-color: #fff;
			font-size: 16px;
			cursor: pointer;
		}
		.select:hover {
			background-color: #f1f1f1;
		}
		.select:focus {
			outline: none;
			box-shadow: 0 0 0 2px #ddd;
		}
		.options {
			position: absolute;
			z-index: 1;
			background-color: #fff;
			border: 1px solid #ccc;
			border-radius: 3px;
			padding: 5px;
			list-style: none;
			margin: 0;
			display: none;
		}
		.option {
			padding: 5px;
			cursor: pointer;
		}
		.option:hover {
			background-color: #f1f1f1;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="label">时间：</div>
		<div class="select" onclick="showOptions('time')">
			<span id="selected-time">请选择时间</span>
			<ul id="time-options" class="options">
				<li class="option" onclick="selectOption('time', '00:00')">00:00</li>
				<li class="option" onclick="selectOption('time', '01:00')">01:00</li>
				<li class="option" onclick="selectOption('time', '02:00')">02:00</li>
				<li class="option" onclick="selectOption('time', '03:00')">03:00</li>
				<li class="option" onclick="selectOption('time', '04:00')">04:00</li>
				<li class="option" onclick="selectOption('time', '05:00')">05:00</li>
				<li class="option" onclick="selectOption('time', '06:00')">06:00</li>
				<li class="option" onclick="selectOption('time', '07:00')">07:00</li>
				<li class="option" onclick="selectOption('time', '08:00')">08:00</li>
				<li class="option" onclick="selectOption('time', '09:00')">09:00</li>
				<li class="option" onclick="selectOption('time', '10:00')">10:00</li>
				<li class="option" onclick="selectOption('time', '11:00')">11:00</li>
				<li class="option" onclick="selectOption('time', '12:00')">12:00</li>
				<li class="option" onclick="selectOption('time', '13:00')">13:00</li>
				<li class="option" onclick="selectOption('time', '14:00')">14:00</li>
				<li class="option" onclick="selectOption('time', '15:00')">15:00</li>
				<li class="option" onclick="selectOption('time', '16:00')">16:00</li>
				<li class="option" onclick="selectOption('time', '17:00')">17:00</li>
				<li class="option" onclick="selectOption('time', '18:00')">18:00</li>
				<li class="option" onclick="selectOption('time', '19:00')">19:00</li>
				<li class="option" onclick="selectOption('time', '20:00')">20:00</li>
				<li class="option" onclick="selectOption('time', '21:00')">21:00</li>
				<li class="option" onclick="selectOption('time', '22:00')">22:00</li>
				<li class="option" onclick="selectOption('time', '23:00')">23:00</li>
			</ul>
		</div>
	</div>
	<script>
		function showOptions(id) {
			document.getElementById(id + '-options').style.display = 'block';
		}

		function hideOptions(id) {
			document.getElementById(id + '-options').style.display = 'none';
		}

		function selectOption(id, value) {
			document.getElementById('selected-' + id).innerHTML = value;
			hideOptions(id);
		}
	</script>
</body>
</html>

这个时间选择器可以使用简单的 JavaScript 来控制下拉列表的显示和隐藏，以及选择时间并显示在选择器中。您可以根据需要修改代码，例如添加更多时间选项或更改样式。

希望这个代码示例对您有所帮助！