CSS

用js封装的时间设置器

2007-07-22　源自:　网友评论　共有( )条评论! 内容报错

本文章地址:http://dev.xuezhishi.net/website/CSS/2007-07-22/20479.html [将本信息与朋友分享!]

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>

http://dev.xuezhishi.net/website/CSS/2007-07-22/20479.html

[评论][发送朋友][长点见识][放入收藏夹]

复制本文链接(URL)发送给朋友：

上一篇：利用CSS改善网站可访问性 ·下一篇：UBB 转换函数演示