一个简单的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实现简单模态窗口,背景灰显
Nov 14 Javascript
js日期时间补零的小例子
Mar 05 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
vue项目实战总结篇
Feb 11 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
js在HTML的三种引用方式详解
Aug 29 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电台频率大全 - 25 云南省
2020/03/11 无线电
php getsiteurl()函数
2009/09/05 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
python实现红包裂变算法
2016/02/16 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
python书籍信息爬虫实例
2018/03/19 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
python drf各类组件的用法和作用
2021/01/12 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
产品工艺师的岗位职责
2013/11/15 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
致运动员赞词
2015/07/22 职场文书
比较node.js和Deno
2021/04/27 Javascript
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
python中的3种定义类方法
2021/11/27 Python