开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

只显示小时分钟的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控制下拉菜单的显示和隐藏，并确保点击外部区域时隐藏菜单。
性能问题: 如果时间选项非常多，可以考虑使用虚拟滚动技术来优化性能。

通过上述代码和解释，你应该能够创建一个简单且功能齐全的时间控件。

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

有帮助

没帮助

相关·内容

js(javascript)取得当前时间小时，分钟，秒以及毫秒

首先我们需要new一个date对象： var d = new Date(); 随后，取得当前时间小时： d.getHours() 取得当前分钟： d.getMinutes()) 取得当前秒： d.getSeconds...d.getMilliseconds() 全部代码如下： var d = new Date(); document.write(' 当前时间的小时...：'+d.getHours()); document.write(' 当前时间的分钟:'+d.getMinutes()); document.write(' 当前时间的秒:'+d.getSeconds...()); document.write(' 当前时间的毫秒:'+d.getMilliseconds());

8.3K1 0

js格式化时间为xx秒前、xx分钟前、xx小时前等

有时候我项目里需要把时间格式化为xx秒前、xx分钟前、xx小时前等形式可以使用下面这个函数 /** * 人性化时间 * @param {Object} timestamp */ function...'前' : '后' mistiming = Math.abs(mistiming) var arrr = ['年','个月','星期','天','小时','分钟','秒']; var

3.4K3 0

解决vue+element 时间控件时间差，区域时差8小时

大家好，又见面了，我是你们的朋友全栈君。后入前的小白，百思不得其解好久，各种百度。...这位小姐姐总结的三种都试了不行，需要的小伙伴可以一起试试~ https://blog.csdn.net/molihuakai_118/article/details/94359373 然后用moment...试了 moment(values.beginTime) 这种也不行，大佬指导和北京时间差8小时，下面这样写就OK了~~ 传值的时候用哦~ moment(date).utcOffset(480).

1.6K1 0

jQuery之datetimepicker控件（时间单位精确到分钟）

body> js.../jquery-1.9.1.min.js"> js/bootstrap.min.js"> js/bootstrap-datetimepicker.min.js..."> js/bootstrap-datetimepicker.zh-CN.js"> <script type="text/javascript...Useful for date-of-birth datetimepickers. */ minView: 0,//最低视图小时视图 maxView:

2.5K3 0

easyUI的时间控件

大家好，又见面了，我是你们的朋友全栈君。以前没怎么用过easyUI，今天用到时间控件，又了解到了一点东西：在页面中通过js添加控件，需要主动渲染。...js 动态的添加的时候，使用append添加 container.append('开始时间'); 在页面只是一个文本框，右侧不显示选择时间的小按钮，控件不能加载查询的得知，easyUI属性的加载是在渲染页面的时候完成，当页面渲染完成之后...，通过js动态调用再添加的easyUI的控件就不再起效果，需要手动的进行加载，于是添加： $.parser.parse(container); 这样就可以将新添加了easyui-datetimebox属性加载到页面...但是在获取数据的时候又出现问题，通过id无法获取值，通过调试得到，时间控件会生成一个隐藏域，里面是选择的时间，但是这个隐藏域里没有id属性，但是有name属性，于是使用name可以获取值 $("input

2.1K2 0

mysql计算时间差小时差天数差分钟差

mysql计算时间差小时差天数差分钟差DATEDIFF函数计算天数差DATEDIFF(date1,date2)DATEDIFF函数返回date1 - date2的计算结果SELECT DATEDIFF...('2023-01-01', '2022-12-31') AS day_diff;返回结果为1计算小时差SELECT DATEDIFF('2023-01-01 12:00:00', '2023-01-01...01-01 12:00:00') AS hour_diff;返回结果为2UNIX_TIMESTAMP函数unix_timestamp(date)，返回1970-1-1 8:00:00开始到date所代表的时间为止的秒数...，对于早于1970-1-1 8:00:00的时间，总是返回 0 。...hour_diff;返回结果为2计算分钟差SELECT (UNIX_TIMESTAMP('2023-01-01 12:00:00') - UNIX_TIMESTAMP('2023-01-01 10:00

5791 0

postgres通过开始时间，结束时间获得几天几小时几分钟几秒

minute FROM (age(endtime, starttime)))); if p_minute 0 then sumTime := sumTime || p_minute || '分钟...'; else sumTime := sumTime || '0分钟'; end if; p_second := (select extract(second FROM (age(endtime

5684 0

mui的时间控件 picker

大家好，又见面了，我是你们的朋友全栈君。的css–> js/mui.min.js”> js/mui.picker.min.js”> document.getElementById(“demo4”).addEventListener(‘tap...设置结束日期 labels: [‘年’, ‘月’, ‘日’]//设置默认标签区域提示语 }//时间

2.1K2 0

js 根据时间戳格式化为24小时的日期形式

javaScript 实现的源码如下： function mydate(time_stamp ) { //time_stamp = 1603352168; var date = new...parseInt(time_stamp ) * 1000).toLocaleString('zh',{hour12:false}); return date; //得到的日期形式为...： 2020/10/22 15:36:08 } 【注意】此时，r如果使用的代码是： toLocaleString('chinese',{hour12:false}) 多数浏览器是没问题的

4.4K1 0

yii时间控件的使用

我们的表单中经常需要用户输入时间，yii中有很方便的时间控件CJuiDatePicker可供使用，得到的效果如下： ? 调用方法 CJuiDatePicker中的参数说明 name：input标签中的name value： input标签中的value options：主要是日历控件显示相关的... showAnim：日历框出现的动画效果，可选值 slideDown, show(the default), slideDown, fadeIn, fold 等 ...，对应的还有minData dateFormat：日历数据格式。...注意，上面value的日期格式必须与此处一致，否则数据不会与控件匹配。 htmlOptions：input框的一些html设置，如样式，最大长度等。

1.2K2 0

VS中时间控件的使用

大家好，又见面了，我是你们的朋友全栈君。使用方法： 1.下载时间控件 My97DatePickerBeta . 2.在VS中新建项目，添加web窗体。...3.将下载好的文件导入你的项目文件中，然后添加如下代码： js” type=”text/javascript...”>//引号内为WdatePicker.js文件的路径 4.添加一个TextBox用来显示时间控件的时间，代码如下： //此代码将最小时间设为2014-01-01 发布者：全栈程序员栈长

1.3K2 0

时间控件（选择时间范围的插件）「建议收藏」

这个是最开始，我采用的是两个时间插件，其他也没啥，就是运营部门使用起来可能感觉太麻烦，为啥不能一次让我选了，还有说老是忘记选择结束时间，然后就有了我接下来的工作。。。.../JS 的书写与组织形式，门槛极低，拿来即用。...这个很有研究意义，可以多思考哟作为时间插件使用，请点击：到layDate插件使用案例这里面有你想用的几乎全部功能，看一下我使用后的页面这样运营同事使用起来更方便也一目了然，真的不错哟最近又用到了这个时间控件...另外，需要用js代码段执行一个laydate实例 //日期范围，指定绑定的DOM元素 laydate.render({ elem...} ,done: function(value, date, endDate){//控件选择完毕后的回调---点击日期、清空、现在、确定均会触发。

5.4K2 0

Java时间工具类（把日期时间转换成xx秒前、xx分钟前、xx小时前...）

"; else if (ago <= ONE_DAY) return ago / ONE_HOUR + "小时" + (ago % ONE_HOUR / ONE_MINUTE)..."年前" + month + "月" + calendar.get(Calendar.DATE) + "日"; } } /** * 距离截止日期还有多长时间..."; else if (remain <= ONE_DAY) return "只剩下" + remain / ONE_HOUR + "小时" +..." + minute + "分钟"; } } /** * 距离今天的绝对时间 * * @param date * @return */ public static String..."; else if (ago <= ONE_DAY) return ago / ONE_HOUR + "小时" + (ago % ONE_HOUR / ONE_MINUTE)

2.3K0 0

javascript 根据次数，计算24小时次数的平均时分秒时间精确到分钟

最近做水务局的巡查系统的时候遇到的这么个问题，就是根据不管多少次，计算出24小时的平均时间，这可把我难住了，后来想了很久的一个计算方法，记下来了，希望能帮助大家！...代码： var minuteTime = 1440; //24*60计算出的分钟数，因为24小时的，写死了，这里可以改天的等等 var count = 5; //修改你想要的平均次数 var minute...count var time = 0; var shang = 0; for(var i = 0;i<count;i++){ time = time + minute console.log("开始时间...："+formatData(shang)+" | 结束时间："+formatData(time)) shang = time+1 } function formatData(val){

7722 0

移动端mobiscroll时间控件的使用

大家好，又见面了，我是你们的朋友全栈君。最近需要实现一个在手机上选择时间的功能，当然首先想到的就是时间控件的使用，最后找到一个相对比较合适，在此记录一下。... js/jquery-1.10.0.min.js"> js/mobiscroll_002.js"...optTime);//时分型 }); 时间控件..."readonly" style="width:28%"/> 效果图：实例和需要的js...及css文件：时间控件实例，需要的话自取。

1.8K2 0

java 获得当前时间前指定几个小时的时间？

//@2016-12-13 获取当前时间，指定前面多少小时的时间 //返回格式YYYYMMDDHHMMSS public static String getBeforeHourTime(int...ihour){ Calendar calendar = Calendar.getInstance(); //Calendar.HOUR_OF_DAY 改一下就是分钟、天、月

2K1 0

vant时间控件的使用「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。时间控件 --> <van-datetime-picker v-model...-- 结束时间控件 --> <van-datetime-picker v-model...this.currentDate1).getTime() / 1000; }, cancel1() { this.show1 = false; }, // 处理控件显示的时间格式...$toast("请输入完整的活动信息"); } else { this.axios .post("/api/agent_team/addTeamActivity

1.5K1 0

Flutter 日期时间DatePicker控件及国际化

firstDate表示开始时间，设置后，选择器不能选择小于此值的时间。 lastDate表示结束时间，设置后，选择器不能选择大于此值的时间。...showDatePicker方法是Future方法，点击日期选择控件的“确定按钮后，返回选择的日期。效果如下： ?...builder参数用于控制子控件，可以向DatePicker一样设置深色主题，还可以设置其显示24小时，用法如下： showTimePicker( context: context, initialTime...mode参数设置日期的格式： time：只显示时间，效果：4 | 14 | PM date：只显示日期，效果：July | 13 | 2012 dateAndTime：时间和日期都显示，效果： Fri...设置只显示小时和分钟： CupertinoTimerPicker( mode: CupertinoTimerPickerMode.hm, ... ) 默认情况下，CupertinoTimerPicker

2.1K2 0

PHP 实现时间戳转化为几分钟前、几小时前等格式

一.PHP最近遇到了后台接口需要给前端传递时间新格式，由于是报警和显示作用，所以就以社交软件上长显示的格式为准，整理了下时间格式。...二.封装的时间转换函数，大体都是按照业务来的，小伙伴们可以在优化function get_last_time($time) 三.如果需要几周前、几月前啥的可以自己调一下比较的时间即可。...于是开始和同事正式解决这个问题, 最终发现是由于函数的时区原因导致,time() 返回自从 Unix 纪元（格林威治时间 1970 年 1 月 1 日 00:00:00）到当前时间的秒数.上面是 time...() 函数在手册中的说明, 重点是格林威治时间, time() 始终返回的是格林威治时间的时间戳....当PHP设置过时区后, date() 在格式化时间的操作中会将 (当前时区的时间 - 格林威治时间) 的偏移量自动添加进去, 按东八区的时间算也就是8小时. strtotime() 同样会自动将时区的偏移量加入处理操作中

1.9K1 0

Flutter 日期时间选择类控件及国际化

firstDate表示开始时间，设置后，选择器不能选择小于此值的时间。 lastDate表示结束时间，设置后，选择器不能选择大于此值的时间。...showDatePicker方法是Future方法，点击日期选择控件的“确定按钮后，返回选择的日期。...： time：只显示时间，效果：4 | 14 | PM date：只显示日期，效果：July | 13 | 2012 dateAndTime：时间和日期都显示，效果： Fri Jul 13 | 4 |...： CupertinoDatePicker( use24hFormat: true, ... ) CupertinoTimerPicker CupertinoTimerPicker 是ios风格的时间选择器...，基本用法如下： CupertinoTimerPicker( onTimerDurationChanged: (Duration duration){ }, ) 效果如下： [1240] 设置只显示小时和分钟

6K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭