只显示小时分钟的js时间控件
要创建一个只显示小时和分钟的JavaScript时间控件，你可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Picker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="time-picker">
<input type="text" id="timeInput" readonly>
<div id="timePickerDropdown" class="time-picker-dropdown">
<!-- Time options will be populated here -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS (styles.css)
.time-picker {
position: relative;
display: inline-block;
}
.time-picker-dropdown {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
z-index: 1000;
}
.time-picker-dropdown.show {
display: block;
}JavaScript (script.js)
document.addEventListener('DOMContentLoaded', function() {
const timeInput = document.getElementById('timeInput');
const timePickerDropdown = document.getElementById('timePickerDropdown');
// Generate time options
for (let hour = 0; hour < 24; hour++) {
for (let minute = 0; minute < 60; minute += 5) { // Increment by 5 minutes
const timeOption = document.createElement('div');
timeOption.textContent = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
timeOption.classList.add('time-option');
timeOption.addEventListener('click', function() {
timeInput.value = timeOption.textContent;
timePickerDropdown.classList.remove('show');
});
timePickerDropdown.appendChild(timeOption);
}
}
// Show/hide dropdown on input click
timeInput.addEventListener('click', function() {
timePickerDropdown.classList.toggle('show');
});
// Hide dropdown when clicking outside
window.addEventListener('click', function(event) {
if (!event.target.closest('.time-picker')) {
timePickerDropdown.classList.remove('show');
}
});
});基础概念
- HTML: 用于构建网页的结构。
- CSS: 用于设置网页的样式。
- JavaScript: 用于实现网页的交互功能。
优势
- 用户友好: 提供直观的时间选择界面，减少用户输入错误。
- 灵活性: 可以自定义时间的显示格式和步长（例如，每5分钟一个选项）。
- 易于集成: 可以轻松嵌入到任何网页中。
类型
- 静态时间控件: 预定义的时间选项。
- 动态时间控件: 根据当前时间或其他条件动态生成时间选项。
应用场景
- 表单填写: 在需要用户输入时间的表单中使用。
- 日程管理应用: 帮助用户快速选择会议时间。
- 在线预订系统: 如餐厅预订或机票预订。
可能遇到的问题及解决方法
- 时间格式不正确: 确保使用
padStart方法来格式化小时和分钟，使其始终为两位数。 - 下拉菜单显示问题: 使用CSS控制下拉菜单的显示和隐藏，并确保点击外部区域时隐藏菜单。
- 性能问题: 如果时间选项非常多，可以考虑使用虚拟滚动技术来优化性能。
通过上述代码和解释，你应该能够创建一个简单且功能齐全的时间控件。
相关·内容
我有一个C# Windows控件，它的DateTimePicker设置为只显示时间(自定义格式h:mm)，我的用户几乎总是点击上/下按钮来控制会议记录。但是，默认情况下，控件会更新小时数。作为一种奖励，当每分钟超过60分钟时，是否有可能让这一小时向前/向后滚动？
浏览 4提问于2013-10-23得票数 1
回答已采纳
2回答
我需要创建自定义UIDatePicker控件只显示星期几，小时，分钟和时间格式(上午，下午)。我刚刚开始iOS开发，所以没有太多的idea.Any见解或参考资料。谢谢
浏览 2提问于2013-02-05得票数 6
回答已采纳
我对vis.js时间线的标签格式有问题。我想显示一个1小时30分钟的时间，标签上只显示经过的分钟和秒的时间。month: '', } };
据我所知，vis.js调用标签(秒、分钟
浏览 2提问于2018-12-06得票数 1
回答已采纳
为什么选择time类型仅显示小时、分钟和秒，而不是像Server中那样显示毫秒？我尝试在时间类型中使用精度，比如time(6)，但它不是工作。如果不是存储毫秒，那么这种时间类型的精确度又意味着什么呢？返回
10:23:00
浏览 7提问于2022-11-02得票数 0
1回答
我希望为JQuery日期时间选择器控件创建一个包装器控件，以便在asp.net网站中使用。一旦用户控件准备就绪，它将用于简单的web窗体/网格/数据列表或中继器控件。用户控件还将公开下面提到的用于自定义的属性。TimeHourFormat："12“或" 24”(12 (AM/PM)或24小时)
TimeAMPMCondense: True (如果12小时<
浏览 5提问于2010-05-14得票数 5
回答已采纳
1回答
SQL数据类型时间
、、、、
是否可以在SQL中创建类似于时间的数据类型，它只显示小时和分钟，而不显示小时、分钟和秒。
例如，如果我将值插入具有数据类型时间的表中，就会得到hh:mm:ss。如何插入只显示hh:mm的值？
浏览 6提问于2015-02-01得票数 0
回答已采纳
我想显示一个有小时间隔插槽的agendaDay视图。然而，我也想要的事件是任意长度。如果某物需要1小时5分钟，那么我希望它以1小时5分钟的形式显示。此时，将调整大小的快照拖到下一个可用的插槽。如何禁用这种快速拖动行为并允许用户设置任意长度的事件？将slo
浏览 1提问于2011-07-11得票数 0
有没有人知道让用户使用winforms控件输入时间(小时和分钟)的好方法？目前，我有两个向上的数值，一个是时间，另一个是分钟，然后我解析它们来创建时间跨度。我唯一的另一个想法是一个文本框，用户可以在其中输入"00:00“时间，并验证输入。然而，这两种方式看起来都有点糟糕(在UI方面)。谢谢
浏览 4提问于2010-03-19得票数 3
回答已采纳
2回答
我想在高图图的上显示时间值的数据。这些时间值可以从10秒到10天不等。目前，我可以设置y轴类型如下： type: 'logarithmic'得到这样的东西：使用对数时间刻度的最佳方法是什么，而不是只显示分钟，显示秒、分钟、小时和天比如:10秒，30秒，1分钟，2分钟，5分钟，10
浏览 4提问于2018-01-04得票数 1
1回答
我的应用程序显示了预计的完成时间(ETA)。
如果TimeSpan是
它应该只显示"5小时“，因为与分钟相比，小时数使<
浏览 5提问于2018-07-20得票数 0
回答已采纳
3回答
对于学校的练习，我必须在WPF应用程序中制作一个文本时钟，这将给您在文本中的时间。例如，我想要的是:当时间是10:30时，时钟应该说十点半，在荷兰语里是‘11点前的一半’，‘一半11’。但我不知道如何在这个for循环中实现它，我尝试了i++;，但这并没有增加时间。我希望大家都明白，否则我会把一切都改成英语。
浏览 1提问于2018-04-12得票数 1
回答已采纳
我希望将数字(A列:小数形式的小时)转换为人类可读的格式，每隔15分钟只显示分钟和小时，最好只在值大于0的情况下显示“分钟”和“小时”。我尝试过应用一种类似于的方法，但我不会从时间数据(仅仅是数字)开始。
浏览 3提问于2021-04-20得票数 0
回答已采纳
我正在尝试使用asp.net ajax工具包的屏蔽编辑控件来获取小时/分钟的输入，并设置掩码99:99和masktype="time“属性。这是控件中的一个bug，或者有什么方法可以将它配置为小时/分钟组合，如果不可能，你可以建议一个允许它
浏览 2提问于2009-01-15得票数 0
回答已采纳
1回答
我有两个时间选择器，用于获取两个不同作业的持续时间，并在代码中使用CTime变量在这些控件中设置时间。
我还有一个编辑控件，它必须显示先前设置的两个选择器的和。，它似乎是如果我有一个偏移1小时。如果将第一个作业的持续时间设置为02:00:00，而将第二个作业的持续时间设置为02:00:00，则编辑控件中的时间之
浏览 1提问于2016-11-28得票数 1
回答已采纳
我正在使用winforms构建一个表单-应该添加一个视图和可编辑的时间跨度值。哪种控件对此最有效？一个普通的编辑控件可以正确地显示->值，但是它并不适合更改值屏蔽的编辑控件没有任何用于此的标准掩码
有没有人有一个好主意来控制这个任务？
浏览 2提问于2009-02-19得票数 5
回答已采纳
我目前在Windows 10中工作，希望创建一个类似于的倒计时器。在这个示例中，他们使用了Coding4Fun工具包，当我通过添加这个工具时，它没有TimeSpanPicker控件，所以我尝试了时间选择器，它运行得非常好。唯一的问题是它只显示了几个小时和几分钟，而不是秒。是否有任何方法可以直接添加秒部分，或者通过编辑TimePicker模板或任何可用的第三方？
请建议这是否可能？
浏览 5提问于2016-04-07得票数 0
回答已采纳
1回答
我已经创建了一个用户表单，用户必须输入一些时间值，例如，这些时间值是产品必须处理的时间。我有一个代码，这几乎是我想要它做的，只有当它达到24小时，它重置为0。但是输入需要24+小时(例如: 36: 59 :59 (其中mm & ss =59的最大值应该是99)。
有人能帮我改变这一切吗？
浏览 6提问于2022-11-22得票数 0
我之所以使用这个，是因为我需要选择分钟和秒，而自动弹出“时间”输入的iPhone时间选择器只提供分钟/小时控件。当我使用jquery时间选择器时，如何防止本地时间选择器弹出？
浏览 2提问于2013-04-30得票数 0
我最近在TimePicker上工作，检查了不同手机上的输出。对于Android版本5.0和更高版本，这是它的样子。和我设计时的想法完全一样。
对于低于5.0的设备，UI看起来不一样。没有任何选择，我可以有一个通用的TimePicker (模拟时钟)，运行在所有的版本？
浏览 3提问于2016-04-06得票数 0
回答已采纳
1回答
我正在创建一个WPF自定义控件。控件是一个时间选择器。它存在一个TextBox，其中包含一个字符串，表示用户输入的时间(如16:35)。当该TextBox被聚焦时，将打开一个Popup，其中包含两个独立的TextBoxes (小时)和分钟(以便于输入)。弹出TextBoxes和主字段TextBox应该是同步的。如果用户在主TextBox中键入无效的时间字符串，而控件无法
浏览 9提问于2020-03-29得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
