一个简单的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 相关文章推荐
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 Javascript
JS代码编译器Monaco使用方法
Jun 11 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
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
浅谈php命令行用法
2015/02/04 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
php输出xml属性的方法
2015/03/19 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
python版学生管理系统
2018/01/10 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
Puma印度官网:德国运动品牌
2019/10/06 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
教师专业自荐信
2014/05/31 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
生日赠语
2015/06/23 职场文书
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android