`

js时分秒控件

    博客分类:
  • JS
 
阅读更多

就是一个控件不多说了直接上代码:

<script language="javascript">
var str = "";
document.writeln("<div id=\"_contents\" style=\"padding:6px; background-color:#E3E3E3; font-size: 12px; border: 1px solid #777777; position:absolute; left:?px; top:?px; width:?px; height:?px; z-index:1; visibility:hidden\">");
str += "\u65f6<select id=\"_hour\">";
for (h = 0; h <= 9; h++) {
    str += "<option value=\"0" + h + "\">0" + h + "</option>";
}
for (h = 10; h <= 23; h++) {
    str += "<option value=\"" + h + "\">" + h + "</option>";
}
str += "</select> \u5206<select id=\"_minute\">";
for (m = 0; m <= 9; m++) {
    str += "<option value=\"0" + m + "\">0" + m + "</option>";
}
for (m = 10; m <= 59; m++) {
    str += "<option value=\"" + m + "\">" + m + "</option>";
}
str += "</select> \u79d2<select id=\"_second\">";
for (s = 0; s <= 9; s++) {
    str += "<option value=\"0" + s + "\">0" + s + "</option>";
}
for (s = 10; s <= 59; s++) {
    str += "<option value=\"" + s + "\">" + s + "</option>";
}
str += "</select> <input name=\"queding\" type=\"button\" onclick=\"_select()\" value=\"\u786e\u5b9a\" style=\"font-size:12px\" /></div>";
document.writeln(str);
var _fieldname;
function _SetTime(tt) {
    _fieldname = tt;
    var ttop = tt.offsetTop;    //TT控件的定位点高
    var thei = tt.clientHeight;    //TT控件本身的高
    var tleft = tt.offsetLeft;    //TT控件的定位点宽
    while (tt = tt.offsetParent) {
        ttop += tt.offsetTop;
        tleft += tt.offsetLeft;
    }
    document.getElementById("_contents").style.top = ttop + thei + 4;
    document.getElementById("_contents").style.left = tleft;
    document.getElementById("_contents").style.visibility = "visible";
}
function _select() {
    _fieldname.value = document.getElementById("_hour").value + ":" + document.getElementById("_minute").value + ":" + document.getElementById("_second").value;
    document.getElementById("_contents").style.visibility = "hidden";
}

</script>
<body>
<input type="text" name="textfield" onclick="_SetTime(this)"/>
</body>

 

分享到:
评论

相关推荐

    js 时分秒控件 时间控件

    在本文中,我们将深入探讨如何创建一个HH:MM:SS格式的JS时分秒控件,允许用户通过键盘或按钮进行操作。 首先,我们需要创建HTML结构来呈现这个时间控件。通常,我们会用三个输入框分别显示小时、分钟和秒,同时添加...

    jquery jquery控件 时间控件 时分秒控件

    标题中提到的"jquery jquery控件 时间控件 时分秒控件",主要指的是那些允许用户以"2012-5-12 17:52:52"这种格式选择具体时间的插件。这种格式遵循ISO 8601标准,包含年、月、日、小时、分钟和秒。与"2012-5-22 00:...

    带时分秒的EXT日期控件

    在原DateTimeField修改 * 此功能较以前版本增加功能 * 1,在GRID中使用时,增加单元格处于编辑状态时的初始化此控件值 * 2,增加操作日选择器时初始化时分秒功能 * 3,增加点击时分秒控件时,带动Ext.DateTimePicker...

    ExtJs4.2.1年月日时分秒、时分秒控件

    在标题提到的"年月日时分秒、时分秒控件",我们可以理解为这是ExtJS中的日期选择器和时间选择器组件,用于用户友好的日期和时间输入。 1. **日期选择器(Date Field)**:ExtJS的`Ext.form.field.Date`类提供了一个...

    JS时间控件(年月日时分秒)

    创建一个JS时间控件(年月日时分秒)不仅涉及到HTML和CSS的布局设计,还涉及JavaScript的事件处理和数据验证。通过熟练掌握这些技术,你可以构建出一款功能强大且用户体验良好的时间选择器,以满足各种Web应用的需求...

    jquery时间控件时分秒

    而"jquery时间控件时分秒"是jQuery的一个扩展插件,用于创建用户友好的时间选择器,帮助用户方便地输入或选择时间,通常用于表单中的时间输入字段。这种控件在许多场合都非常实用,比如预订系统、日程安排或时间跟踪...

    js时间控件 精确到时分秒

    总的来说,创建一个精确到时分秒的JS时间控件并实现日期范围限制,需要熟练掌握JavaScript的Date对象,理解时间的处理方式,以及熟练应用DOM操作和事件监听。通过不断优化和扩展,我们可以构建出一个既强大又人性化...

    js带时分秒日期时间控件

    在JavaScript(JS)中,创建一个带有时分秒的日期时间控件是一项常见的需求,尤其在Web开发中,用户可能需要选择或输入精确到秒的时间。这个控件可以帮助用户直观地选择日期和时间,提高用户体验。本文将深入探讨...

    日历年月日时分秒控件myCalendar.js

    `myCalendar.js`是一款小巧而功能强大的JavaScript库,专为创建日历年月日时分秒控件而设计。本文将深入探讨`myCalendar.js`的原理、使用方法及其在实际项目中的应用。 一、`myCalendar.js`概述 `myCalendar.js`的...

    真正可用的时分秒JS插件

    2. **时分秒JS插件的特点** - **易用性**:这个插件设计简洁,易于理解和使用,适合各种技术水平的开发者。 - **灵活性**:可以灵活设置时、分、秒的显示格式,满足不同场景的需求。 - **实时更新**:自动根据...

    ExtJs4.0.7年月日时分秒、时分秒控件

    在本篇文章中,我们将深入探讨如何在ExtJS 4.0.7中使用年月日时分秒以及时分秒控件。 首先,ExtJS中的日期时间控件主要由`Ext.picker.Date`和`Ext.picker.Time`组成。`Ext.picker.Date`用于选择日期,而`Ext.picker...

    js带时分秒控件

    本文将深入探讨“js带时分秒控件”这一主题,旨在为你提供关于如何创建、使用和定制这类时间选择组件的详细知识。 ### 1. 时间控件的用途 时间控件通常用于用户界面,允许用户方便地输入或选择时间值,如预约时间、...

    原生js日期控件带时分秒点击text文本框选择日期时分秒

    在JavaScript编程中,创建一个原生的日期控件,尤其是带有时分秒选择功能的,是常见的需求。这种控件通常用于用户输入日期和时间,比如在表单中。在这个场景下,`input`文本框结合原生JS可以实现一个自定义的日期...

    EXTJS5 日期时分秒控件

    EXTJS5 日期时分秒控件,直接引用到程序中使用。网上有很多extjs4版本的和EXTJS5不兼容。调用实例代码: {labelWidth:60,width: 220,name:'mydate',fieldLabel: '日期',allowBlank: false,xtype: 'datetimefield',...

    EXTJS时间控件年月日时分秒

    创建一个年月日时分秒的时间控件,我们需要设置以下关键配置项: 1. `format`: 这个配置项用于指定时间的显示格式,例如`'Y-m-d H:i:s'`表示年-月-日 时:分:秒。 2. `minValue`和`maxValue`: 分别设置时间选择的...

    一个很好的日历控件(带时分秒)

    标题中的“一个很好的日历控件(带时分秒)”指的是一个用于Web应用程序的用户界面组件,它允许用户选择日期、时间或者两者都选,且具有时分秒的精细选择功能。这样的控件通常被用在需要用户输入特定时间信息的场景...

    js时间控件带时分秒

    "js时间控件带时分秒"的描述表明,这是一个专门针对时间选择功能开发的JavaScript组件,方便用户在网页上便捷地设置和选择精确到秒的时间值。 在网页开发中,JavaScript时间控件通常通过HTML5的`...

    多功能jQuery日期控件 jeDate.js 支持年月日时分秒的选择

    jeDate是一款大众化的日期控件,她身兼多职,虽不是万能的,但是她却是功能强大多样的美少女,她除了包含 单双面板、区域选择、 多语言、日历固定、有效无效日期、日期时间戳转换、日期加减、限制时分秒、初始化日期...

    javascript带时分秒日历控件

    本文将深入探讨如何使用JavaScript实现一个带时分秒的日历控件。 首先,我们需要理解日历控件的基本结构。一个完整的日历通常包含月份选择、日期选择和时间选择。在JavaScript中,我们可以创建一个HTML结构来展示...

Global site tag (gtag.js) - Google Analytics