一个简单的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实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 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
一个取得文件扩展名的函数
2006/10/09 PHP
用PHP查询域名状态whois的类
2006/11/25 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
限制复选框的最大可选数
2006/07/01 Javascript
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
再探JavaScript作用域
2014/09/24 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
python实现超市商品销售管理系统
2019/11/22 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
模范家庭事迹材料
2014/02/10 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
《狼》教学反思
2014/03/02 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
车间安全生产管理制度
2015/08/06 职场文书
MySQL Server 层四个日志
2022/03/31 MySQL