一个简单的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 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
深入理解Promise.all
Aug 08 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
php类中private属性继承问题分析
2012/11/01 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
python在指定目录下查找gif文件的方法
2015/05/04 Python
Python3 操作符重载方法示例
2017/11/23 Python
解决python删除文件的权限错误问题
2018/04/24 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
python实现五子棋小游戏
2020/03/25 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
Python如何根据时间序列数据作图
2020/05/12 Python
Python 代码调试技巧示例代码
2020/08/11 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
社区巾帼文明岗事迹材料
2014/06/03 职场文书
留学生求职信
2014/06/03 职场文书
责任书格式范文
2014/07/28 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
前台接待员岗位职责
2015/04/15 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server