用js封装的时间设置器

2007-02-09　源自:　网友评论 0 条　进入视频教程

　　js的成员和方法好象没有private和public之分，列一下public的成员和方法

成员：
name 控件的名字，既这个控件的变量名（必选）
fName 时间的input的name，可以后台获取，也就是input的name属性（可选，默认为 m_input

方法：
play() 使时间框呈现动态效果
getTime() 获取设定的时间

IE5.5+效果最佳，IE5运行也没有问题，就是CSS有些对不齐（IE5实在是太老了。。。可以退休了）
运行代码框
<style type="text/CSS">body { background-color: #D4D0C8;}.m_frameborder { border-left: 2px inset #D4D0C8; border-top: 2px inset #D4D0C8; border-right: 2px inset #FFFFFF; border-bottom: 2px inset #FFFFFF; width: 100px; height: 19px; background-color: #FFFFFF; overflow: hidden; text-align: right; font-family: "Tahoma"; font-size: 10px;}.m_arrow { width: 16px; height: 8px; font-family: "Webdings"; font-size: 7px; line-height: 2px; padding-left: 2px; cursor: default;}.m_input { width: 18px; height: 14px; border: 0px solid black; font-family: "Tahoma"; font-size: 9px; text-align: right;}</style><script language="JavaScript">// Written by cloudchen, 2004/03/15function minute(name,fName) { this.name = name; this.fName = fName || "m_input"; this.timer = null; this.fObj = null; this.toString = function() { var objDate = new Date(); var sMinute_Common = "class=/"m_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/""; var sButton_Common = "class=/"m_arrow/" onfocus=/"this.blur()/" onmouseup=/""+this.name+".controlTime()/" disabled" var str = ""; str += "<table border=/"0/" cellspacing=/"0/" cellpadding=/"0/">" str += "<tr>" str += "<td>" str += "<div class=/"m_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 += "</div>" str += "</td>" str += "<td>" str += "<table border=/"0/" cellspacing=/"2/" cellpadding=/"0/">" str += "<tr><td><button id=/""+this.fName+"_up/" "+sButton_Common+">5</button></td></tr>" str += "<tr><td><button id=/""+this.fName+"_down/" "+sButton_Common+">6</button></td></tr>" str += "</table>" str += "</td>" str += "</tr>" str += "</table>" return str; } 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.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(this.fName+"_up").disabled = eval(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(":") }}var m = new minute("m");document.write(m);m.play();</script><button onclick="alert(m.getTime())" style="font:8px Webdings;width:15px;height:15px;line-height:6px;">4</button><button style="font:10px Arial;height:15px;height:16px;border:0px;" onfocus="this.blur()">Get Time-Value</button>

上一篇： 用 onerror 获取错误信
下一篇：用CSS做的几个漂亮的Button

评论　 点击查看

通行证密码 

匿名发表