一个简单的JS时间控件示例代码(JS时分秒时间控件)

自己在网上找了半天没找到只有 “时分秒”的控件, 就自己做了个,发在这里方便有人用到

鼠标点击 后 的效果

SetTime.js


代码如下:

/**//***********************************
* 使用说明:
* 首先把本控件包含到页面
* <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";
}

时间: 2013-11-20

JS日期和时间选择控件升级版(自写)

鉴于网上找到的几个日期选择程序有些问题,遂着手重写一个程序,大部分还是借鉴前人的代码,添加了时间选择功能,隐藏会遮挡控件的标签select,object. 开始本想使用window.createPopup()来弹出日历的选择,这样就可以跨过任何标签. 不过做到中途发现用createPopup窗口实现理论上是行不通的: 一是因为不在窗体里单击任何地方都会关闭窗口,而当用下拉框选择年份时,很有可能会单击到窗体外的地方,当然这个可以自己写select来避免,但是比较麻烦: 二是窗体的宽度和高度只能在弹

日期 时间js控件

复制代码 代码如下: <script language="JavaScript"> /**//** *本日历选择控件由tiannet根据前人经验完善而得.大部分代码来自meizz的日历控件. *tiannet添加了时间选择功能.select,object标签隐藏功能,还有其它小功能. *使用方法: * (1)只选择日期 <input type="text" name="date" readOnly onClick="s

javascript实现日历控件(年月日关闭按钮)

经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的过程. 下面是要实现的html结构: <div id="a"><div id="head"><span id="yface">年:<select id="year"></select></span><span id=&quo

js获取时间精确到秒(年月日)

本文实例为大家分享了利用js获取时间并输出值的全部代码,供大家参考学习,具体内容如下 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="gb2312"> <title></title> <script type="text/javascript"> window.onload=function

json格式的时间显示为正常年月日的方法

json格式的时间显示为:/Date(1377828670436)/需要转换为正常年月日,方法如下: 复制代码 代码如下: //通过序列化转换出来的json,如果里面有DateTime格式的,就不会正常显示时间,用下面的方法就可以了 var date=renderTime(json.AddDateTime); //把读出来的json格式时间传入这个方法内 function renderTime(date){ var da = new Date(parseInt(date.replace("/Da

js时间控件只显示年月

话不多说,请看代码: <input id="db"  /> 初始化加载db标签. $(function () { $('#db').datebox({ onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层 span.trigger('click'); //触发click事件弹出月份层 if (!tds) setTimeout(function () {//延时触发获取月份对象,因为上面的事件触发和对象生成有

时间戳转换为时间 年月日时间的JS函数

复制代码 代码如下: ormatDate:function(dateNum){var date=new Date(dateNum*1000);return date.getFullYear()+"-"+fixZero(date.getMonth()+1,2)+"-"+fixZero(date.getDate(),2)+" "+fixZero(date.getHours(),2)+":"+fixZero(date.getMinu

JavaScript显示当然日期和时间即年月日星期和时间

效果: 当前时间:2011年6月20日 星期一12:0:19 复制代码 代码如下: <mce:script language="javascript"><!-- function getTimeNow() { var time = new Date(); var hour = time.getHours(); var minute = time.getMinutes(); var second = time.getSeconds(); var week; var da

JavaScript时间操作之年月日星期级联操作

本文实例介绍了JavaScript时间操作之级联日期选择操作的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312"> <title>年月日星期级联</title> </head> <body topmargin=&

JavaScript时间日期操作实例小结【5个示例】

本文实例讲述了JavaScript时间日期操作.分享给大家供大家参考,具体如下: 本来想在网上找一些js实例来练练手,结果发现一本书<突破JavaScript编程实例五十讲>,看了下内容还不错,就下了下来: 后面又下了该书籍的源码,一看才发现这本书编的日期是2002年的,代码运行之后,有些代码可以运行,有些代码已经失效,原因是其所用的一些语言是已经淘汰的了. 其次就是由于是很早之前写的,那时候可能还没有css,js,html分离的想法,都是杂糅在一起的,看起来很不舒服. 还有就是,代码末尾都是

JavaScript时间与时间戳的转换操作实例分析

本文实例讲述了JavaScript时间与时间戳的转换操作.分享给大家供大家参考,具体如下: 一.时间转时间戳:javascript获得时间戳的方法有五种,都是通过实例化时间对象 new Date() 来进一步获取当前的时间戳 1. var timestamp1 = Date.parse(new Date()); // 结果:1544151187000 不推荐这种办法,毫秒级别的数值被转化为000 console.log(timestamp1); 2. var timestamp2 = (new

javascript中对Date类型的常用操作小结

javascript中对Date类型的常用操作小结 /** 3. * 日期时间脚本库方法列表: 4. * (1)Date.isValiDate:日期合法性验证 5. * (2)Date.isValiTime:时间合法性验证 6. * (3)Date.isValiDateTime:日期和时间合法性验证 7. * (4)Date.prototype.isLeapYear:判断是否闰年 8. * (5)Date.prototype.format:日期格式化 9. * (6)Date.stringToD

javascript实现对表格元素进行排序操作

我们在上网中都能看到很多能够排序的,如大小.时间.价格等 现在我们也试一下排序功能: 排序的函数代码:里面含有点击之后排序--还原,和排升序和降序. function sortAge(){ //对年龄进行排序,要先进行获得每一行对象,然后对象对象中的第一个(从0 开始)的大小进行排序 var tabNode = document.getElementById("tabid"); var rows0 = tabNode.rows; var rows1 = []; //现将元素拷贝一份出来

详解javascript对数组和json数组的操作

经常使用javascript对数组和json数组进行操作,但是时间久了就忘记咋操作的了,所以这里简单记录一下 直接看代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript数组操作</title> <script type="application/javascript

下拉菜单的级联操作(ajax)

在开发中常常会遇到菜单的级联操作,比如:国家.城市.乡镇的选择等.当选中某个国家的时候,后面的菜单会把该国家内的城市罗列出来,当选中城市的时候,后面的菜单会把对应的乡镇列出来. 解决这种菜单的级联操作的办法,我理解的有两种: ①使用js来实现,把页面所用到的级联数据放到js内,当页面加载完成后,通过js显示到对应的select内,这种方法的解决办法有很多种,最为直观的一种是放到多维数组中,每个人的思维不一样,这里就不详细解说. ②使用ajax异步动态加载,然后显示到对应的select内,这种方法

Spring实现动态修改时间参数并手动开启关停操作

spring实现定时任务的方式有三种,分别是java自带的timer类.spring task和quartz三种. 本文只介绍spring自带的task和第三方quartz.spirng task可以将它比作一个轻量级的Quartz,使用起来非常简单,除spring相关的包外不需要额外的包,而且支持注解和配置文件两种.接着直接演示spring task注解实现方式. 首先,创建任务类,如下: @Component public class MyScheduler { int i =0; publ

JavaScript利用HTML DOM进行文档操作的方法

HTML DOM 树 一.DOM简介 DOM是W3C制定的用于访问诸如XML和XHTML等结构化文档的标准. W3C文档对象模型(DOM)是一个使程序和脚本有能力动态地访问和更新文档的内容.结构以及样式的平台和语言中立的接口 核心DOM:用于任何结构化文档的标准模型 XML DOM:用于XML文档的标准模型.是用于获取.更改.添加或删除XML元素的标准. HTML DOM: 用于HTML文档的标准模型.定义了所有HTML元素的对象和属性,以及访问它们的方法(接口). 二.DOM节点 根据DOM规

jQuery级联操作绑定事件实例

级联操作绑定事件是jQuery非常具有实用价值的一个技巧,本文即以实例形式实现这一功能.分享给大家供大家参考之用.具体方法如下: 本文所述实例主要实现jQuery操作一个列表,根据类别选出学校,点击学校出现院系,点击院系出现专业,然后链接至专业申请页面. 具体功能代码如下: $("li.university").click(function(){ var id = $(this).attr("rel"); $.get("data.aspx?type=u&a