zl程序教程

您现在的位置是:首页 >  后端

当前栏目

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

JS代码 简单 一个 时间 示例 控件 时分秒
2023-06-13 09:15:12 时间
自己在网上找了半天没找到只有“时分秒”的控件,就自己做了个,发在这里方便有人用到



鼠标点击后的效果

SetTime.js

复制代码代码如下:

/**//***********************************
*使用说明:
*首先把本控件包含到页面
*<scriptsrc="XXX/setTime.js"type="text/javascript"></script>
*控件调用函数:_SetTime(field)
*例如<inputname="time"type="text"  onclick="_SetTime(this)"/>
*
************************************/
varstr="";
document.writeln("<divid=/"_contents/"style=/"padding:6px;background-color:#E3E3E3;font-size:12px;border:1pxsolid#777777; position:absolute;left:?px;top:?px;width:?px;height:?px;z-index:1;visibility:hidden/">");
str+="/u65f6<selectname=/"_hour/">";
for(h=0;h<=9;h++){
   str+="<optionvalue=/"0"+h+"/">0"+h+"</option>";
}
for(h=10;h<=23;h++){
   str+="<optionvalue=/""+h+"/">"+h+"</option>";
}
str+="</select>/u5206<selectname=/"_minute/">";
for(m=0;m<=9;m++){
   str+="<optionvalue=/"0"+m+"/">0"+m+"</option>";
}
for(m=10;m<=59;m++){
   str+="<optionvalue=/""+m+"/">"+m+"</option>";
}
str+="</select>/u79d2<selectname=/"_second/">";
for(s=0;s<=9;s++){
   str+="<optionvalue=/"0"+s+"/">0"+s+"</option>";
}
for(s=10;s<=59;s++){
   str+="<optionvalue=/""+s+"/">"+s+"</option>";
}
str+="</select><inputname=/"queding/"type=/"button/"onclick=/"_select()/"value=/"/u786e/u5b9a/"style=/"font-size:12px/"/></div>";
document.writeln(str);
var_fieldname;
function_SetTime(tt){
   _fieldname=tt;
   varttop=tt.offsetTop;   //TT控件的定位点高
   varthei=tt.clientHeight;   //TT控件本身的高
   vartleft=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";
}