一个简单的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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
vue组件入门知识全梳理
Sep 21 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
php的mssql数据库连接类实例
2014/11/28 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
取得父标签
2006/11/14 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python魔法方法-属性访问控制详解
2016/07/25 Python
对Python3中的input函数详解
2018/04/22 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
对python函数签名的方法详解
2019/01/22 Python
python实现复制文件到指定目录
2019/10/16 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
大堂副理的岗位职责范文
2014/02/17 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
六查六看自查报告
2014/10/14 职场文书
给老婆道歉的话
2015/01/20 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
mysql 获取相邻数据项
2022/05/11 MySQL
Android中View.post和Handler.post的关系
2022/06/05 Java/Android