一个简单的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 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
js数组操作学习总结
Nov 04 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
vue基于better-scroll实现左右联动滑动页面
Jun 30 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
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
php GeoIP的使用教程
2011/03/09 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
Node.js简单入门前传
2017/08/21 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
Python实现图像几何变换
2015/07/06 Python
python实现flappy bird游戏
2018/12/24 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
大二自我鉴定
2014/01/31 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
会计学毕业生求职信
2014/06/25 职场文书
解除合同协议书范本
2016/03/21 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python