B/S结构中的时间输入控件

来源：互联网发布：李宇春整容知乎编辑：程序博客网时间：2024/04/18 21:08

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>test timeControl</title>
</head>
<script language="JavaScript">
// Written by cloudchen, 2004/03/15
// @name:必须：时间控件名称，自定义，不可重复
// @forObj:必须：对话数据项控件名称,不允许重复
// @fName:可选：时间控件组件,不允许重复
// last modfiy by 农民程序员(191301587@163.com) 2004年9月7日 19:01:02
function timeControl(name,forObj,fName) {
this.name = name;
this.fName = fName || "mctr_input_"+this.name;

this.timer = null;
this.fObj = null;

this.toString = function() {
var objDate = new Date();
//
var sMinute_Common = "class=/"mctr_input/" maxlength=/"2/" name=/""+this.fName+"/" onfocus=/""+
   this.name+".setFocusObj(this)/" onblur=/""+this.name+".setTime(this)/" onkeyup=/""+
   this.name+".prevent(this)/" onkeypress=/"if (!/[0-9]/.test(String.fromCharCode(event.keyCode)))event.keyCode=0/""+
   " onpaste=/"return false/" ondragenter=/"return false/" style=/"ime-mode:disabled/" onPropertychange=/""+
   this.name+".setForObjValue()/"";
//
var sButton_Common = "class=/"mctr_arrow/" onfocus=/"this.blur()/" onmouseup=/""+this.name+".controlTime()/" disabled";

var str = "";
str +=" <style type=/"text/css/">"
str +=" .mctr_frameborder {"
str +=" border-left: 1px inset #D4D0C8;"
str +=" border-top: 1px inset #D4D0C8;"
str +=" border-right: 1px inset #D4D0C8;"
str +=" border-bottom: 1px inset #D4D0C8;"
str +=" width: 130px;"
str +=" height: 20px;"
str +=" background-color: #FFFFFF;"
str +=" overflow: hidden;"
str +=" text-align: left;"       //text-align: right;
str +=" vertical-align: text-top;"
str +=" font-family: /"Tahoma/";"
str +=" font-size: 14px;"
str +=" }"
str +=" .mctr_arrow {"
str +=" width: 16px;"
str +=" height: 10px;"
str +=" font-family: /"Webdings/";"
str +=" font-size: 9px;"
str +=" line-height: 2px;"
str +=" background-color: #FFFFFF;"
str +=" padding-left: 2px;"
str +=" cursor: default;"
str +=" }"
str +=" .mctr_table {"
str +=" padding-top: 0px;"
str +=" padding-right: 0px;"
str +=" padding-bottom: 0px;"
str +=" padding-left: 0px;"
str +=" }"
str +=" .mctr_input {"
str +=" width: 18px;"
str +=" height: 16px;"
str +=" border: 0px solid black;"
str +=" font-size: 12px;"
str +=" text-align: right;"
str +=" background-color: transparent;"
str +=" }"
str +=" </style>";
str += "<table border=/"0/" cellspacing=/"0/" cellpadding=/"0/" class=/"mctr_table/">"
str += "<tr class=/"mctr_table/">"
str += "<td class=/"mctr_table/">"
str += "<span class=/"mctr_frameborder/">"
str += "<input radix=/"24/" value=/""+this.formatTime(objDate.getHours())+"/" "+sMinute_Common+">:"
str += "<input radix=/"60/" value=/""+this.formatTime(objDate.getMinutes())+"/" "+sMinute_Common+">:"
str += "<input radix=/"60/" value=/""+this.formatTime(objDate.getSeconds())+"/" "+sMinute_Common+">"
str += "</span>"
str += "</td>"
str += "<td class=/"mctr_table/">"
str += "<table border=/"0/" cellspacing=/"0/" cellpadding=/"0/" class=/"mctr_table/">"
str += "<tr class=/"mctr_table/"><td class=/"mctr_table/"><button id=/""+this.fName+"_up/" "+sButton_Common+">5</button></td></tr>"
str += "<tr class=/"mctr_table/"><td class=/"mctr_table/"><button id=/""+this.fName+"_down/" "+sButton_Common+">6</button></td></tr>"
str += "</table>"
str += "</td>"
str += "<td>"
str += "<input type=/"Text/" name=/""+forObj+"/" id=/""+forObj+"/" value=/""+this.getNowTime()+"/" style=/"display:'none'/">"
str += "</td>"
str += "</tr>"
str += "</table>"
return str;
}
this.getNowTime=function(){
var objDate = new Date();
return this.formatTime(objDate.getHours())+":"+
    this.formatTime(objDate.getMinutes())+":"+
    this.formatTime(objDate.getSeconds());
}
this.play = function() {
this.timer = setInterval(this.name+".playback()",1000);
}
this.formatTime = function(sTime) {
sTime = ("0"+sTime);
return sTime.substr(sTime.length-2);
}
this.playback = function() {
var objDate = new Date();
var arrDate = [objDate.getHours(),objDate.getMinutes(),objDate.getSeconds()];
var objMinute = document.getElementsByName(this.fName);
for (var i=0;i<objMinute.length;i++) {
   objMinute[i].value = this.formatTime(arrDate[i])
}
}
this.setForObjValue=function(){
eval("document.all."+forObj+".value=this.getTime()");
}
this.prevent = function(obj) {
clearInterval(this.timer);
this.setFocusObj(obj);
var value = parseInt(obj.value,10);
var radix = parseInt(obj.radix,10)-1;
if (obj.value>radix||obj.value<0) {
   obj.value = obj.value.substr(0,1);
}
}
this.controlTime = function(cmd) {
event.cancelBubble = true;
if (!this.fObj) return;
clearInterval(this.timer);
var cmd = event.srcElement.innerText=="5"?true:false;
var i = parseInt(this.fObj.value,10);
var radix = parseInt(this.fObj.radix,10)-1;
if (i==radix&&cmd) {
   i = 0;
} else if (i==0&&!cmd) {
   i = radix;
} else {
   cmd?i++:i--;
}
this.fObj.value = this.formatTime(i);
this.fObj.select();
}
this.setTime = function(obj) {
obj.value = this.formatTime(obj.value);
}
this.setFocusObj = function(obj) {
eval("document.all."+this.fName+"_up").disabled = eval("document.all."+this.fName+"_down").disabled = false;
this.fObj = obj;
}
this.getTime = function() {
var arrTime = new Array(2);
for (var i=0;i<document.getElementsByName(this.fName).length;i++) {
   arrTime[i] = document.getElementsByName(this.fName)[i].value;
}
return arrTime.join(":")
}
this.setInitControl=function(){
var iTime=eval("document.all."+forObj+".value");
var arrTime=new Array();
arrTime=str2Array(iTime,":");
for (var i=0;i<arrTime.length;i++){
   document.getElementsByName(this.fName)[i].value=arrTime[i];
}
}
}
//将字符串str按照字符串ch拆分产生数组
function str2Array(str,ch)
{
var a=new Array();
var i=0,j=-1,k=0;
while (i<str.length)
{
j=str.indexOf(ch,j+1);
if (j!=-1)
{
   if (j==0){a[k]="";}else{a[k]=str.substring(i,j);}
   i=j+1;
}else
{
   a[k]=str.substring(i,str.length);
   i=str.length;
}
k++;
}
return a;
}
</script>
<body>
<script language="JavaScript">

</script>
<button onclick="alert(document.all.txtDateE.value)">click me</button>
</body>
</html>