一个简单的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 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
js opener的使用详解
Jan 11 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
详解javascript的变量与标识符
Jan 04 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 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
怎么使 Mysql 数据同步
2006/10/09 PHP
php 更新数据库中断的解决方法
2009/06/05 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
Javascript的一种模块模式
2008/03/22 Javascript
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
js微信分享实现代码
2020/10/11 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
python 网络编程常用代码段
2016/08/28 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
干部选拔任用方案
2014/05/26 职场文书
中央空调节能方案
2014/06/15 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
2014年信用社工作总结
2014/11/25 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js