一个简单的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 相关文章推荐
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
Ext.MessageBox工具类简介
Dec 10 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
js中this用法实例详解
May 05 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
js+audio实现音乐播放器
Sep 13 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 define()函数及defined()函数使用详解
2013/06/09 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
jQuery.form.js的使用详解
2017/06/14 jQuery
vue如何从接口请求数据
2017/06/22 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
Python读写zip压缩文件的方法
2018/08/29 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
华三通信H3C面试题
2015/05/15 面试题
后勤副校长自我鉴定
2013/10/13 职场文书
服务之星获奖感言
2014/01/21 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
素质教育标语
2014/06/27 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
员工辞职信怎么写
2015/02/27 职场文书
实习单位意见
2015/06/04 职场文书
新店开张宣传语
2015/07/13 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python