位置: 东方标准 >> 教学中心 >> 专题讲座 >> 正文

用js封装的时间设置器

[ 作者:东方标准     来源:东方标准     文章录入:东方标准 ]

<!--广告代码开始--> <!--广告代码开始-->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>

下一篇文章: UBB 转换函数演示
(只显示最新5条。评论内容只代表网友观点,与本站立场无关!) 发表评论