一个简单的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 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
picChange 图片切换特效的函数代码
May 06 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
js脚本实现数据去重
Nov 27 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
layui table 参数设置方法
Aug 14 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
React自定义hook的方法
Jun 25 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中的 == 运算符进行字符串比较
2006/11/26 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
详解React 16 中的异常处理
2017/07/28 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
javaScript动态添加Li元素的实例
2018/02/24 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
python实现ping的方法
2015/07/06 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
python协程之动态添加任务的方法
2019/02/19 Python
python 同时读取多个文件的例子
2019/07/16 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
python库matplotlib绘制坐标图
2019/10/18 Python
基于python实现文件加密功能
2020/01/06 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
职业女性的职业规划
2014/03/04 职场文书
鸿星尔克广告词
2014/03/21 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
免职证明样本
2014/10/23 职场文书
经费申请报告范文
2015/05/18 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js