简单的js时间选择器，javascript时间选择器
网上全是js的日历控件，没有找到好的时间控件，今天找到了一个就分享给大家！二次转web开发网（http://www.webkaifa.com）
setTime.js内容如下：
/**//***********************************
* 简单时间控件： version 1.0
* 作者：李禄燊
* 时间：2007-10-31
*
* 使用说明：
* 首先把本控件包含到页面
* <script src="XXX/setTime.js" type="text/javascript"></script>
* 控件调用函数：_SetTime(field)
* 例如 <input name="time" type="text" onclick="_SetTime(this)"/>
*
************************************/
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 name=\"_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 name=\"_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 name=\"_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.all._contents.style.top = ttop + thei + 4;
document.all._contents.style.left = tleft;
document.all._contents.style.visibility = "visible";
}
function _select() {
_fieldname.value = document.all._hour.value + ":" + document.all._minute.value + ":" + document.all._second.value;
document.all._contents.style.visibility = "hidden";
}
测试代码页面如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="setTime.js" type="text/javascript"></script>
<title>无标题文档</title>
</head>
<body>
<input name="ff" type="text" readonly onclick="_SetTime(this)"/>
</body>
</html>
分享到：
相关推荐
本文将详细讲解"web端日期选择器、月份选择器、时间选择器以及时间范围选择器"这四个核心知识点，并结合提供的文件名称进行分析。 1. **日期选择器** 日期选择器是Web应用中常见的组件，用于让用户选择一个具体的...
首先，"dol-datepicker.js" 文件很可能是这个日期时间选择器的主要实现部分，它包含了JavaScript代码，用于创建交互式的日期时间选择界面以及处理用户的选取行为。JavaScript的Date对象是处理日期和时间的基础，我们...
JavaScript时间选择器是一种常见的前端交互元素，用于帮助用户在网页上方便地选择日期或时间。在本案例中，"超实用js时间选择器" 提供了一个简洁易用的解决方案，只需引入相关的JavaScript和CSS文件，就能在项目中...
"js时间选择器"是一种JavaScript插件，用于提供美观且用户友好的时间选择功能。这种组件通常会以弹出日历的形式出现，允许用户方便地选取特定的日期，而无需手动输入。在本文中，我们将深入探讨js时间选择器的工作...
3. **JavaScript时间选择器库**： - **Bootstrap Datepicker**：这是一个流行的JavaScript库，它为Bootstrap框架提供了日期选择器功能，同时也可以独立使用。它提供了丰富的定制选项，如日期范围选择、多种语言支持...
JavaScript时间选择器是一种在Web页面上为用户提供直观、便捷的方式来选取特定时间的交互元素。它通常包含小时、分钟和（可选）秒的选择，并且可以适应24小时制或12小时制。这类选择器广泛应用于表单输入、事件预订...
3. `js`：这是一个JavaScript文件，很可能包含了实现日期选择器逻辑的代码。JavaScript部分可能包括以下功能： - 初始化日期选择器，根据用户的操作显示和隐藏日历视图。 - 处理用户点击或键盘输入，更新选定的...
JavaScript颜色选择器是一种交互式用户界面组件，常用于网页设计，允许用户在多种色彩中选取所需的颜色。在前端开发中，JavaScript与jQuery库结合使用，可以实现高效且功能丰富的颜色选择器，例如colpick插件。这个...
1. **JavaScript时间选择器**：JavaScript时间选择器通常基于jQuery或者其他轻量级库，它提供了一种友好的方式来选择日期和时间，使得用户输入更加直观和准确。 2. **自定义事件和回调函数**：好的时间选择器允许...
以JTimer.js为例，这可能是一个定制的日期和时间选择器实现，或者是一个计时器组件。不过，由于提供的信息有限，无法详细介绍其具体功能和使用方法。通常，这样的库会包含初始化、配置选项、事件绑定等API，以满足...
通过阅读这篇博客，我们可以获取到关于该JavaScript时间选择器的实现细节和实际应用。 标签“源码”意味着这个压缩包可能包含了实现该时间选择器的源代码。源码是程序员可以查看、修改和学习的原始代码，对于开发者...
【标题】"一个简单的...总的来说，"一个简单的jQuery时间选择器"项目涵盖了前端开发中的多个核心概念，包括jQuery库的使用、插件开发、事件处理、样式设计以及响应式布局等，是学习和实践JavaScript开发的好素材。
精美的Javascript颜色选择器 精美的Javascript颜色选择器
`JS` 文件夹很可能是存放JavaScript源代码的地方，其中可能包括了日期选择器的核心逻辑，如日期计算、事件处理、DOM操作等。JavaScript代码通常会使用DOM（文档对象模型）来操作HTML元素，实现与用户的交互。 `...
html js javascript 颜色选择器 类似画图里的颜色选择器
JavaScript日历选择器是一种在网页上提供用户交互的日历组件，通常用于输入日期或选取日期范围。这种组件在各种Web应用程序中广泛使用，比如在线预订系统、事件安排、表单填写等。它允许用户通过图形界面方便地选择...
这个压缩包文件的标题“时间日期JavaScript选择时间日期”表明它包含了一系列用于在网页上实现日期和时间选择功能的JavaScript代码片段或库。这些资源可能是开发者个人整理并珍藏的经典示例，可以帮助我们更好地理解...
本篇文章介绍了如何在 JSP 页面中实现一个基于 JavaScript 的时间选择器控件。该控件可以显示一个日历形式的时间选择器，方便用户选择日期和时间。 知识点一：时间选择器控件 该控件使用 JavaScript 技术开发，...
**时间选择器javascript脚本 My97DatePicker** `My97 DatePicker` 是一款广泛应用于Web开发中的JavaScript日期选择器插件，它为用户提供了一个友好、直观的界面来选择日期，大大提高了用户在网页上输入日期时的体验...
本文将深入探讨移动端时间选择器的设计原理、实现方式以及相关的JavaScript技术。 1. 设计原则 - 用户友好：移动端时间选择器应直观易用，避免复杂的操作流程。 - 空间利用：在小屏幕上合理布局，确保所有选项...