一个简单的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实现代码
May 23 Javascript
Javascript玩转继承(三)
May 08 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
小程序如何写动态标签的实现方法
Feb 05 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
PHP 函数语法介绍一
2009/06/14 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
使用js检测浏览器的实现代码
2013/05/14 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
Python3中的真除和Floor除法用法分析
2016/03/16 Python
彻底理解Python中的yield关键字
2019/04/01 Python
python设置环境变量的作用和实例
2019/07/09 Python
Python3进制之间的转换代码实例
2019/08/24 Python
如何学习Python time模块
2020/06/03 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
Django URL参数Template反向解析
2020/11/24 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
网络技术专业求职信
2014/02/18 职场文书
关于责任的演讲稿
2014/05/20 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
Python中npy和mat文件的保存与读取
2022/04/24 Python
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers