一个简单的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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
Layui表格监听行单双击事件讲解
Nov 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
PHP 文件类型判断代码
2009/03/13 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
PHP之header函数详解
2021/03/02 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
jquery选择器简述
2015/08/31 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
Python排序算法实例代码
2017/08/10 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
python使用PyQt5的简单方法
2019/02/27 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
python读取Excel表格文件的方法
2019/09/02 Python
基于python3生成标签云代码解析
2020/02/18 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
Python截图并保存的具体实例
2021/01/14 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
出纳员岗位职责
2014/03/13 职场文书
代理协议书
2014/04/22 职场文书
节约能源标语
2014/06/17 职场文书
师德师风的心得体会
2014/09/02 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
内乡县衙导游词
2015/02/05 职场文书
医学会议开幕词
2016/03/03 职场文书