js选择小时分钟

在JavaScript中选择小时和分钟通常涉及到使用<select>元素或者创建自定义的时间选择器。以下是一些基础概念和相关实现方式：

基础概念

<select>元素：HTML中的一个表单元素，用于创建下拉列表。
时间选择器：一种用户界面元素，允许用户选择特定的时间，可以是小时和分钟。

实现方式

使用`<select>`元素

你可以使用两个<select>元素，一个用于小时，一个用于分钟：

<label for="hour">Hour:</label>
<select id="hour">
  <!-- 生成小时选项 -->
  <script>
    for (let i = 0; i < 24; i++) {
      document.write(`<option value="${i}">${i}</option>`);
    }
  </script>
</select>

<label for="minute">Minute:</label>
<select id="minute">
  <!-- 生成分钟选项 -->
  <script>
    for (let i = 0; i < 60; i++) {
      document.write(`<option value="${i}">${i}</option>`);
    }
  </script>
</select>

使用JavaScript库

有许多JavaScript库可以帮助你创建更复杂和美观的时间选择器，例如：

jQuery Timepicker：一个简单易用的时间选择器插件。
Flatpickr：一个轻量级、功能强大的日期和时间选择器。

应用场景

预约系统：用户需要选择预约的具体时间。
日程管理：用户需要设置提醒或事件的具体时间。
表单填写：用户需要填写具体的时间信息。

可能遇到的问题及解决方法

时间格式不一致：确保所有时间选项的格式一致，避免用户混淆。
- 解决方法：统一使用24小时制或12小时制，并在界面上明确标注。

用户输入错误：用户可能会手动输入错误的时间。
- 解决方法：使用<select>元素限制用户只能选择有效的时间，或者在用户输入后进行验证。
兼容性问题：不同的浏览器可能对时间选择器的支持不同。
- 解决方法：使用跨浏览器兼容的JavaScript库，或者在代码中添加兼容性处理。

示例代码

以下是一个简单的示例，展示如何使用JavaScript生成小时和分钟的<select>元素：

<!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>
</head>
<body>
  <form>
    <label for="hour">Hour:</label>
    <select id="hour">
      <!-- 生成小时选项 -->
      <script>
        for (let i = 0; i < 24; i++) {
          document.write(`<option value="${i}">${i}</option>`);
        }
      </script>
    </select>

    <label for="minute">Minute:</label>
    <select id="minute">
      <!-- 生成分钟选项 -->
      <script>
        for (let i = 0; i < 60; i++) {
          document.write(`<option value="${i}">${i}</option>`);
        }
      </script>
    </select>
  </form>
</body>
</html>

通过这种方式，你可以为用户提供一个简单直观的时间选择界面。如果需要更复杂的功能，可以考虑使用专门的JavaScript库。

页面内容是否对你有帮助？

有帮助

没帮助

MySQL:将分钟转换为小时和分钟

、、、

我已经将duration列分为小时和分钟。| 1 | 40| 3 | 40Total | 5 | 140我的问题是 $query3a = mysql_query("select SUM(hours) AS Totalhours, SUM(mins) AS Totalmins

浏览 3提问于2015-05-10得票数 1

1回答

生成小时:分钟选择列表

、、

一直到23:30 --所以每30分钟重复一次？我使用的是Rails3，虽然它可以工作，但它不包括分钟(在我的例子中，每半小时) select_hour(13, :prompt => 'Choose hour')

浏览 0提问于2012-12-12得票数 3

回答已采纳

1回答

在unix时间戳中获取moment.js矩0

、

我正在尝试使用moment.js进行类似于python的计算。、秒和诸如此类的东西都是0，并以moment.js格式'X‘()转换为unix时间戳0。对评论的回应:通常时间选择器用于选择某一日期/一天的时间。时间选择器14:35的值通常被解释为14小时35分钟。您可以使用相同的选择器让用户选择时间段(或时间增量)而不是时间。这意味着事情之间有14小时35分钟的时间，或者有些事情需

浏览 3提问于2013-11-11得票数 5

回答已采纳

1回答

TimePicker更改为从代码中选择小时和分钟

、

假设我有TimePicker，我用手指选择小时。在我选择小时后，TimePicker将布局更改为“选择分钟”。我如何从代码中告诉TimePicker我想选择小时而不是分钟？好吧，我想我没说清楚。当我们打开TimePicker时，我们选择小时(第一个)，然后选择分钟(第二个)。我们可以通过单击hour和minutes来更正我们的选择。如何将代码从

浏览 0提问于2016-11-22得票数 0

2回答

用于选择日期、小时和分钟的jquery日期时间选择器

、、、、

我希望有一个jquery的日期时间选择器来选择日期、小时和分钟。我想要12小时的钟，显示上午-下午。和分钟选择。所有插件显示24小时时钟和当前时间。我不想选择当前的时间，我应该能够选择任何时间，我的want.all插件显示分钟步长为10分钟或15分钟等，我不想这样。我想有12小时格式的时间选择与上午-下午和分钟

浏览 1提问于2015-06-30得票数 0

回答已采纳

1回答

如何在v-时间选择器中禁用选择分钟？

、、、

在我的Vue.js应用程序中，我使用Vuetify框架的小部件。有什么方法可以禁用选择分钟吗？如果用户选择小时，v-time-picker小部件将自动切换到分钟块。我想把焦点保存在小时区。正如您在我的例子中所看到的，当用户选择“小时”时，我以编程方式设置分钟值。这就是为什么我不需要向用户显示分钟块的原因。

浏览 0提问于2020-01-08得票数 1

3回答

如何禁用在v时间选择器小部件中选择分钟？

、、、

在我的Vue.js应用程序中，我使用Vuetify框架的小部件。我想禁用选择分钟。如果用户选择小时，则在分钟内自动插入00。如何使它正确？现在我设置了allowed-minutes道具，但在这种情况下，用户仍然需要选择分钟。

浏览 10提问于2020-01-06得票数 2

1回答

序列化包含三个不同对象列表的对象Protobuf-net

我一直在阅读这个包的功能，我只是想知道是否有可能序列化一个包含3个不同对象列表的对象，或者我是否会浪费我的时间来切换。

浏览 3提问于2015-03-10得票数 0

回答已采纳

2回答

背景:每小时前2分钟，服务器在处理前一小时收到的数据时，停止访问返回繁忙屏幕的站点。这可以持续不到两分钟，在这种情况下，它睡觉，直到两分钟结束。如果它的持续时间超过两分钟，它就会运行，只要它需要返回。备选案文2是更有吸引力的选择。这将删除the服务器上的重复点击，但不会重复检查数据库。然而，对于像我们这样的Apache2.0运行程序来说，2不是一个选择，尽管我们拥有自己的服务器，但我们中没有一个是web管理员，不想破坏它--人们花钱来玩它，所以如果它不

浏览 2提问于2010-10-19得票数 2

1回答

如何将form.js钛合金改为显示时间

、

如何更改titanium 中的form.js代码我想添加一个“时间”字段到我的表单(人们选择小时，分钟，上午/下午)。我如何通过更改移动form.js的钛代码来做到这一点？

浏览 0提问于2012-08-17得票数 0

回答已采纳

2回答

用AM/PM选项设置PHP JQuery中时间选择器的下拉列表

、、、

我获得了一个jquery插件，用于在PHP文件中调用日期选择器。一切运行良好，甚至直到它被集成或张贴到数据库。然而，我希望它是一个AM/PM选项，小时值从1开始到12小时结束。我已经找到了一个解决方案在前面的一个问题在这里的网站，但它只做的是将选定的值(在24小时设置)转换为相等的时间AM/PM格式。我更喜欢的是小时的下拉式:分钟是小时:分钟AM/PM显示，在一个12小时的设置中。 jquery的文档位于

浏览 2提问于2016-02-28得票数 2

回答已采纳

1回答

分钟

、

我使用插件让用户选择日期和时间。在html表单上，我指向日期选择器ID。<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"https://cdnjs.cloudflare.com/ajax/

浏览 3提问于2020-08-24得票数 0

回答已采纳

1回答

如何使持续时间选择器响应本机

、、

我正在尝试构建一个持续时间选择器:它看起来像一个简单的ios时间选择器，但是它从0分钟零0秒开始，最多23小时59分钟。我尝试使用普通的DateTimePickers ()，并使用24小时格式，这是可行的。问题是ios不支持24小时格式。PS: 12小时格式，从图片中可以看到，从1小时零分钟开始，所以如果有人想要20分钟，那就不好了。它看起来像这样，但在24小时格式下，从0<em

浏览 7提问于2022-08-16得票数 0

回答已采纳

1回答

在数组中设置和存储时间并附加到datepicker

、、、、

首先是一个使用JqueryUI的日期选择器。它以编码的方式工作，并提醒选定的日期。在这个问题上，我需要不允许它选择一个过去的日期。第二，我创建了一个时间数组。时间需要添加到下一个索引项目中的15分钟。我已经用几个问题创建了它。我将小时设置为从8点开始。效果很好，但它抓住了当前的分钟。我尝试将分钟设置为0、1、-1和许多其他值。然而，这并不起作用。另一个问题是，虽然它增加了15分钟，一旦超过8小时，它就会重复当前分钟。这意味着它增加了

浏览 3提问于2015-08-10得票数 0

1回答

离子日期时间选取器动态更新列

、、、

时间选择用户选择小时和分钟的位置。小时将提供可以是任何(1,5,6,13,19)等。每小时有自己的分钟数据结构如下 { minutes: [0, 15, 30], { minutes: [15, 25, 40],] 当用户选择小时时，分钟选择将根据结构而改变。

浏览 1提问于2021-02-26得票数 2

1回答

用i18n在ember.js中转换12小时到24小时的时钟

、、

我想知道是否有一种使用i18n和ember.js在12小时和24小时时钟之间进行转换的方法？ I18n确实有下面描述的带有经络的日期对象。但我不确定24小时到12小时之间的转换是否被支持。

浏览 2提问于2014-06-24得票数 0

回答已采纳

3回答

获取日、小时和分钟的不同时刻js

、

我有两个日期时间选择器(from，to)。我需要得到开始和结束日期在分钟(1505min)和日期和时间(2天1h 35分钟)之间的差异。我使用moment.jsvar end = moment('2018-06-02 00:00'); // another dateduration.asDays(); console.log(days) //65.4152777777

浏览 1提问于2018-03-20得票数 11

回答已采纳

1回答