用js封装的时间设置器

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

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

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

IE5.5+效果最佳,IE5运行也没有问题,就是css有些对不齐(IE5实在是太老了。。。可以退休了)

 1<style type="text/css">   
 2body {   
 3background-color: #D4D0C8;   
 4}   
 5.m_frameborder {   
 6border-left: 2px inset #D4D0C8;   
 7border-top: 2px inset #D4D0C8;   
 8border-right: 2px inset #FFFFFF;   
 9border-bottom: 2px inset #FFFFFF;   
10width: 100px;   
11height: 19px;   
12background-color: #FFFFFF;   
13overflow: hidden;   
14text-align: right;   
15font-family: "Tahoma";   
16font-size: 10px;   
17}   
18.m_arrow {   
19width: 16px;   
20height: 8px;   
21font-family: "Webdings";   
22font-size: 7px;   
23line-height: 2px;   
24padding-left: 2px;   
25cursor: default;   
26}   
27.m_input {   
28width: 18px;   
29height: 14px;   
30border: 0px solid black;   
31font-family: "Tahoma";   
32font-size: 9px;   
33text-align: right;   
34}   
35</style>
 1<script language="javascript">   
 2// Written by cloudchen, 2004/03/15   
 3function minute(name,fName) {   
 4this.name = name;   
 5this.fName = fName || "m_input";   
 6this.timer = null;   
 7this.fObj = null;   
 8  
 9this.toString = function() {   
10var objDate = new Date();   
11var 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\"";   
12var sButton_Common = "class=\"m_arrow\" onfocus=\"this.blur()\" onmouseup=\""+this.name+".controlTime()\" disabled"   
13var str = "";   
14str += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"   
15str += "<tr>"   
16str += "<td>"   
17str += "<div class=\"m_frameborder\">"   
18str += "<input radix=\"24\" value=\""+this.formatTime(objDate.getHours())+"\" "+sMinute_Common+">:"   
19str += "<input radix=\"60\" value=\""+this.formatTime(objDate.getMinutes())+"\" "+sMinute_Common+">:"   
20str += "<input radix=\"60\" value=\""+this.formatTime(objDate.getSeconds())+"\" "+sMinute_Common+">"   
21str += "</div>"   
22str += "</td>"   
23str += "<td>"   
24str += "<table border=\"0\" cellspacing=\"2\" cellpadding=\"0\">"   
25str += "<tr><td><button id=\""+this.fName+"_up\" "+sButton_Common+">5</button></td></tr>"   
26str += "<tr><td><button id=\""+this.fName+"_down\" "+sButton_Common+">6</button></td></tr>"   
27str += "</table>"   
28str += "</td>"   
29str += "</tr>"   
30str += "</table>"   
31return str;   
32}   
33this.play = function() {   
34this.timer = setInterval(this.name+".playback()",1000);   
35}   
36this.formatTime = function(sTime) {   
37sTime = ("0"+sTime);   
38return sTime.substr(sTime.length-2);   
39}   
40this.playback = function() {   
41var objDate = new Date();   
42var arrDate = [objDate.getHours(),objDate.getMinutes(),objDate.getSeconds()];   
43var objMinute = document.getElementsByName(this.fName);   
44for (var i=0;i<objMinute.length;i++) {   
45objMinute[i].value = this.formatTime(arrDate[i])   
46}   
47}   
48this.prevent = function(obj) {   
49clearInterval(this.timer);   
50this.setFocusObj(obj);   
51var value = parseInt(obj.value,10);   
52var radix = parseInt(obj.radix,10)-1;   
53if (obj.value>radix||obj.value<0) {   
54obj.value = obj.value.substr(0,1);   
55}   
56}   
57this.controlTime = function(cmd) {   
58event.cancelBubble = true;   
59if (!this.fObj) return;   
60clearInterval(this.timer);   
61var cmd = event.srcElement.innerText=="5"?true:false;   
62var i = parseInt(this.fObj.value,10);   
63var radix = parseInt(this.fObj.radix,10)-1;   
64if (i==radix&&cmd) {   
65i = 0;   
66} else if (i==0&&!cmd) {   
67i = radix;   
68} else {   
69cmd?i++:i--;   
70}   
71this.fObj.value = this.formatTime(i);   
72this.fObj.select();   
73}   
74this.setTime = function(obj) {   
75obj.value = this.formatTime(obj.value);   
76}   
77this.setFocusObj = function(obj) {   
78eval(this.fName+"_up").disabled = eval(this.fName+"_down").disabled = false;   
79this.fObj = obj;   
80}   
81this.getTime = function() {   
82var arrTime = new Array(2);   
83for (var i=0;i<document.getElementsByName(this.fName).length;i++) {   
84arrTime[i] = document.getElementsByName(this.fName)[i].value;   
85}   
86return arrTime.join(":")   
87}   
88}   
89var m = new minute("m");   
90document.write(m);   
91m.play();   
92</script>
1<button onclick="alert(m.getTime())" style="font:8px Webdings;width:15px;height:15px;line-height:6px;">4</button>
1<button onfocus="this.blur()" style="font:10px Arial;height:15px;height:16px;border:0px;">Get Time-Value</button>
Published At
Categories with 网页设计
Tagged with
comments powered by Disqus