一个简单的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 相关文章推荐
基于jquery的超简单上下翻
Apr 20 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
ES6中字符串的使用方法扩展
Jun 04 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 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
在smarty中调用php内置函数的方法
2013/02/07 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
Python中安装easy_install的方法
2018/11/18 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
员工工作及收入证明
2014/10/28 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
MongoDB数据库的安装步骤
2021/06/18 MongoDB
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript