一个简单的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";
}

赞 (0)

相关推荐

  • JS日期和时间选择控件升级版(自写)

    JS日期和时间选择控件升级版(自写)

    鉴于网上找到的几个日期选择程序有些问题,遂着手重写一个程序,大部分还是借鉴前人的代码,添加了时间选择功能,隐藏会遮挡控件的标签select,object. 开始本想使用window.createPopup()来弹出日历的选择,这样就可以跨过任何标签. 不过做到中途发现用createPopup窗口实现理论上是行不通的: 一是因为不在窗体里单击任何地方都会关闭窗口,而当用下拉框选择年份时,很有可能会单击到窗体外的地方,当然这个可以自己写select来避免,但是比较麻烦: 二是窗体的宽度和高度只能在弹

  • JavaScript时间操作之年月日星期级联操作

    JavaScript时间操作之年月日星期级联操作

    本文实例介绍了JavaScript时间操作之级联日期选择操作的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312"> <title>年月日星期级联</title> </head> <body topmargin=&

  • js获取时间精确到秒（年月日）

    js获取时间精确到秒（年月日）

    本文实例为大家分享了利用js获取时间并输出值的全部代码,供大家参考学习,具体内容如下 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="gb2312"> <title></title> <script type="text/javascript"> window.onload=function

  • json格式的时间显示为正常年月日的方法

    json格式的时间显示为:/Date(1377828670436)/需要转换为正常年月日,方法如下: 复制代码 代码如下: //通过序列化转换出来的json,如果里面有DateTime格式的,就不会正常显示时间,用下面的方法就可以了 var date=renderTime(json.AddDateTime); //把读出来的json格式时间传入这个方法内 function renderTime(date){ var da = new Date(parseInt(date.replace("/Da

  • javascript实现日历控件(年月日关闭按钮)

    经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的过程. 下面是要实现的html结构: <div id="a"><div id="head"><span id="yface">年:<select id="year"></select></span><span id=&quo

  • 时间戳转换为时间 年月日时间的JS函数

    复制代码 代码如下: ormatDate:function(dateNum){var date=new Date(dateNum*1000);return date.getFullYear()+"-"+fixZero(date.getMonth()+1,2)+"-"+fixZero(date.getDate(),2)+" "+fixZero(date.getHours(),2)+":"+fixZero(date.getMinu

  • JavaScript显示当然日期和时间即年月日星期和时间

    效果: 当前时间:2011年6月20日 星期一12:0:19 复制代码 代码如下: <mce:script language="javascript"><!-- function getTimeNow() { var time = new Date(); var hour = time.getHours(); var minute = time.getMinutes(); var second = time.getSeconds(); var week; var da

  • js时间控件只显示年月

    js时间控件只显示年月

    话不多说,请看代码: <input id="db"  /> 初始化加载db标签. $(function () { $('#db').datebox({ onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层 span.trigger('click'); //触发click事件弹出月份层 if (!tds) setTimeout(function () {//延时触发获取月份对象,因为上面的事件触发和对象生成有

  • 日期 时间js控件

    复制代码 代码如下: <script language="JavaScript"> /**//** *本日历选择控件由tiannet根据前人经验完善而得.大部分代码来自meizz的日历控件. *tiannet添加了时间选择功能.select,object标签隐藏功能,还有其它小功能. *使用方法: * (1)只选择日期 <input type="text" name="date" readOnly onClick="s

  • Python实现一个简单的毕业生信息管理系统的示例代码

    写在前面: 从昨晚的梦里回忆起数据管理的作业: 实现一个自己的选题---- 毕业生信息管理系统,实现学生个人信息基本的增删改查, 我想了想前段时间刚学习的列表,这个简单啊 ,设计一个学生信息列表,然后列表里面再存每个学生详细信息的列表,然后来实现一个基本的增删查改,这个不难啊!直接开始撸代码! 上代码! def Menu():##菜单主界面 print('*'*22) print("* 查看毕业生列表输入: 1 *") print("* 添加毕业生信息输入: 2 *"

  • Java实现一个简单的长轮询的示例代码

    Java实现一个简单的长轮询的示例代码

    目录 分析一下长轮询的实现方式 长轮询与短轮询 配置中心长轮询设计 配置中心长轮询实现 客户端实现 服务端实现 分析一下长轮询的实现方式 现在各大中间件都使用了长轮询的数据交互方式,目前比较流行的例如Nacos的配置中心,RocketMQ Pull(拉模式)消息等,它们都是采用了长轮询方的式实现.就例如Nacos的配置中心,如何做到服务端感知配置变化实时推送给客户端的呢? 长轮询与短轮询 说到长轮询,肯定存在和它相对立的,我们暂且叫它短轮询吧,我们简单介绍一下短轮询: 短轮询也是拉模式.是指不管

  • Java实现一个简单的文件上传案例示例代码

    Java实现一个简单的文件上传案例 实现流程: 1.客户端从硬盘读取文件数据到程序中 2.客户端输出流,写出文件到服务端 3.服务端输出流,读取文件数据到服务端中 4.输出流,写出文件数据到服务器硬盘中 下面上代码 上传单个文件 服务器端 package FileUpload; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.net.Serve

  • 一个简单的JS时间控件示例代码(JS时分秒时间控件)

    一个简单的JS时间控件示例代码(JS时分秒时间控件)

    自己在网上找了半天没找到只有 "时分秒"的控件, 就自己做了个,发在这里方便有人用到 鼠标点击 后 的效果 SetTime.js 复制代码 代码如下: /**//************************************ 使用说明:* 首先把本控件包含到页面 * <script src="XXX/setTime.js" type="text/javascript"></script>* 控件调用函数:_Set

  • python实现一个简单的并查集的示例代码

    并查集是一种树型的数据结构,用于处理一些不相交集合的合并及查询问题.常常在使用中以森林来表示. 并查集有三种基本操作,获得根节点,判断两节点是否连通,以及将两不连通的节点相连(相当于将两节点各自的集合合并) 用UnionFind类来表示一个并查集,在构造函数中,初始化一个数组parent,parent[i]表示的含义为,索引为i的节点,它的直接父节点为parent[i].初始化时各个节点都不相连,因此初始化parent[i]=i,让自己成为自己的父节点,从而实现各节点不互连. def __ini

  • 如何使用proxy实现一个简单完整的MVVM库的示例代码

    前言 MVVM 是当前时代前端日常业务开发中的必备模式(相关框架如react,vue,angular 等), 使用 MVVM 可以将开发者的精力更专注于业务上的逻辑,而不需要关心如何操作 dom.虽然现在都 9012 年了,mvvm 相关原理的介绍已经烂大街了,但出于学习基础知识的目的(使用 proxy 实现的 vue3.0 还在开发中), 在参考了之前 vue.js 的整体思路之后,自己动手实现了一个简易的通过 proxy 实现的 mvvm. 本项目代码已经开源在github,项目正在持续完善

  • Android Studio实现简单的QQ登录界面的示例代码

    一.项目概述 QQ是我们日常生活使用最多的软件之一,包含登录界面和进入后的聊天界面.好友列表界面和空间动态界面等.登录界面的制作比较简单,主要考验布局的使用,是实现QQ项目的第一步.现在APP开发的首要工作都是实现登录页面,所以学会了QQ登录界面对以后的软件开发有着很重要的作用. 二.开发环境 三.详细设计 1.头像设计 首先在layout文件里面选择了RelativeLayout(相对布局)作为整个页面的布局. 在顶端放置了一个ImageView控件,宽度和高度设置的都是70dp,水平居中设置

  • js复制内容到剪贴板代码,js复制代码的简单实例

    如下所示: <script type="text/JavaScript"> function jsCopy(){ var e=document.getElementById("contents");//对象是contents e.select(); //选择对象 document.execCommand("Copy"); //执行浏览器复制命令 } </script> <textarea id="conte

  • 使用Dropzone.js上传的示例代码

    使用Dropzone.js上传的示例代码

    本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下: 说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php form作为上传区 引入Dropzone.js和dropzone.css然后使用表单form定义一个class="dropzone"即可完成 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l

  • Android实现简单的下拉阻尼效应示例代码

    Android实现简单的下拉阻尼效应示例代码

    OS的下拉上拉都会出现一个很玄的动态效果.在Android中,虽然可以实现类似的效果,但有点不同的是,如果调用overScrollBy来实现类似的阻尼效应的话,最顶部会出现一片亮的区域,让人感觉不是很爽.所以决定不采用该方法来实现而是改用自定义的方式来实现. 下面是自定义控件的代码部分: public class MyView extends ScrollView { //记录下最开始点击的位置 int initY; //移动的位置 int deltaY; int touchY; //记录第一个

随机推荐