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


Posted in Javascript onNovember 22, 2013

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

一个简单的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";
}
Javascript 相关文章推荐
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
给js文件传参数(详解)
Jul 13 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 #Javascript
实现51Map地图接口(示例代码)
Nov 22 #Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 #Javascript
jquery根据name属性查找的小例子
Nov 21 #Javascript
js 走马灯简单实例
Nov 21 #Javascript
js获取客户端外网ip的简单实例
Nov 21 #Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 #Javascript
You might like
各种战术和打法的原创者
2020/03/04 星际争霸
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
php实现可运算的验证码
2015/11/10 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP运行模式汇总
2016/11/06 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
JQuery小知识
2010/10/15 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
Python标准异常和异常处理详解
2015/02/02 Python
使用Python生成XML的方法实例
2017/03/21 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
简单英文演讲稿
2014/01/01 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
自荐信需注意事项
2014/01/25 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
校友会致辞
2015/07/30 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
拙作再改《我的收音机情缘》
2022/04/05 无线电