用js封装的时间设置器

【 tulaoshi.com - Javascript 】

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.valueradix||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) {ev </div> <p style="color:#333;margin:10px 0;">来源:http://www.tulaoshi.com/n/20160129/1483541.html</p> </div> <div id="tls-pages" class="tls-pages"></div> <ul class="pages-two"> <li class="pages-two-item"> <span>上一篇：</span> <a href="/n/20160129/1483540.html">AutoCAD教程：最简单的弹簧画法</a> </li> <li class="pages-two-item"> <span>下一篇：</span> <a href="/n/20160129/1483542.html">随鼠标的闪烁小星星</a> </li> </ul> </div> </div> <div class="contain-left read-more"> <p class="inter-tit rel"> <a href="javascript:;">看过《用js封装的时间设置器》的人还看了以下文章</a> <a href="/diannao/" class="C_hs_nr_111_a">更多>></a> </p> <ul class="read-list clearfix style-circle"> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1483541.html">用js封装的时间设置器</a> <span class="fr">01-29</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1610598.html">JS新闻无缝滚动封装函数</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160220/1631763.html">CSS圆角框进行JS封装</a> <span class="fr">02-20</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1506644.html">用Js判断输入的时间是否有效</a> <span class="fr">01-29</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160220/1632439.html">JS读写Cookie以及设置过期时间</a> <span class="fr">02-20</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1598715.html">用js计算页面执行时间的函数</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160220/1632312.html">JS和HTML分离:注册事件的方法进行封装</a> <span class="fr">02-20</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1598546.html">VB倒计时器和JS当前时间</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1591162.html">JS 正则 时间验证</a> <span class="fr">02-19</span> </li> <li class="read-item clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1626184.html">js文件封装javascript在html中获取url参数</a> <span class="fr">02-19</span> </li> </ul> </div> <div class="contain-left site-output"><script>tls.output.www_news('banner2_780')</script></div> <div class="contain-left site-output"><script>tls.output.www_news('banner3_780')</script></div> <div class="vertical-tab-box contain-left"> <div class="recommend-tit clearfix"> <div class="recommend-tit-cont">延伸阅读</div> </div> <div class="lx-news-box"> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1589122.html">一个js封装的不错的选项卡效果代码</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1589122.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/dfd35ea40866b94a53a6e0001b5efb25_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> <div class="ks-news-desc"> 代码如下： !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" html head meta http-equiv="Content-Type" content="text/html; charset=gb2312" title脚本之家 选项卡效果 www.jb51.net/title script type="text/javascript" /*     ...</div> </div> </div> <div class="site-output"><script>tls.output.www_news('banner4_780')</script></div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1601294.html">[JS]点出统计器</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1601294.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/dd2a116b48e550c49fa430b72f400266_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> <div class="ks-news-desc">ff 默认不让改 status opera9   测试通过 ie6  测试通过 这东西是给统计部门用的，分析用户习惯以改良网站布局。 只是写着玩的小东西，所以很多地方不太理想。 save() 方法是保存记录的,没仔细做,应该再加个判断浏览器,然后决定用 img 还是 iframe,以保证 request 一定...</div> </div> </div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160129/1484954.html">用js绘图</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160129/1484954.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201601/29/9eb3ad581757a946152077d57a70ef9a_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/java/" target="_blank">Java</a> <a href="http://www.tulaoshi.com/javajichu/" target="_blank">JAVA基础</a> </div> <div class="ks-news-desc">   <object id=DirectDraw classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6" style="positiion:absolute;top:0;left:0;width:320;height:200" <param name="line0001" value="绘图指令1" <param name="line0002" value="绘图指令2" ... </object ...</div> </div> </div> <div class="site-output"><script>tls.output.www_news('banner5_780')</script></div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1622405.html">用DLL方式封装MDI子窗体</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1622405.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/55a11372a044c5b3c26ffec788e9af0f_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/bianchengyuyan/" target="_blank">编程语言</a> <a href="http://www.tulaoshi.com/wangluobiancheng/" target="_blank">网络编程</a> </div> <div class="ks-news-desc"> 用DLL方式封装MDI子窗体是一种常用的软件开发技术，它的优点： 开发人员可以负责某一个模块的编写包括（界面＋逻辑），可以互不干扰，模块开发完成后，主程序统一调用。 易于程序升级，当程序升级时，不用编译主exe文件，更新某个DLL就可以升级。 可以根据客户不同的需求、价钱给他们不同的模块。（奸商都愿意用这招） 最近用到这个技...</div> </div> </div> <div class="ks-news-grid"> <div class="ks-news-tit clearfix"> <a href="http://www.tulaoshi.com/n/20160219/1595791.html">用js自动判断浏览器分辨率的代码</a> </div> <div class="clearfix"> <div class="ks-news-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1595791.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/47e419a823efd7ad1c583d58bd623b35_thumb_189.jpg"> </a> </div> <div class="ks-news-tag"> <span>标签：</span> <a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a> </div> <div class="ks-news-desc">代码如下： SCRIPT LANGUAGE="JavaScript" !-- if (window.navigator.userAgent.indexOf("MSIE")=1) { var IE1024=""; var IE800=""; var IE1152=""; var IEother=""; ScreenWidth(IE1024,IE800,IE1152,IEother) } else{ if (window.navigator.userAgent.indexOf("Firefox")=1) { var Fi...</div> </div> </div> <div class="news-more-btn"> <a class="btn btn-block btn-default" title="查看更多精彩" href="/diannao/">查看更多精彩>></a> </div> </div> </div> <div class="contain-left site-output"><script>tls.output.www_news('banner6_780')</script></div> </div> <!--width 300--> <div class="conter_300"> <div class="contain-right site-output"><script>tls.output.www_news('right1_300')</script></div> <div class="Member clearfix"> <div class="Menber_tx_1 rel"> <a href="/user/慕温言青/1/"> <img class="member-img" src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/11.jpg" width="70" height="70" alt="慕温言青"> </a> <a href="/user/慕温言青/1/" id="username">慕温言青</a> </div> <div class="Menber_tx_ww"> <div class="Menter_tx_ww_1"> <p>经验教程</p> <a href="/user/慕温言青/1/">487</a> </div> <div class="Menter_tx_ww_1 right_j"> <p>收藏</p> <a href="/user/慕温言青/2/">7</a> </div> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right2_300')</script></div> <!--最新文章、热门文章--> <div class="hop_gg clearfix js-tab"> <div class="hop_gg_s clearfix tab_control2"> <a class="js-tab-item active" href="javascript:;">最新文章</a> </div> <div class="hop_gg_xg2_box"> <div class="hop_gg_xg2 js-tab-list active"> <ul> <li><a href="http://www.tulaoshi.com/n/20160129/1483540.html">AutoCAD教程：最简单的弹簧画法</a></li> <li><a href="http://www.tulaoshi.com/n/20160129/1483538.html">HTML语言剖析（九）图形标记</a></li> <li><a href="http://www.tulaoshi.com/n/20160129/1483537.html">AutoCAD教程：运动水壶建模全过程</a></li> <li><a href="http://www.tulaoshi.com/n/20160129/1483536.html">AutoCAD教程：不可忽视的配置文件问题！</a></li> <li><a href="http://www.tulaoshi.com/n/20160129/1483535.html">HTML组件(HTML COMPONENTS)之四</a></li> </ul> </div> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right3_300')</script></div> <div class="hop_gg clearfix js-tab newest-msg"> <div class="hop_gg_s clearfix"> <a href="javascript:;" class="js-tab-item active" >Javascript</a> </div> <div class="hop_gg_xg2_box"> <div class="hop_gg_xg2 js-tab-list active" > <ul class="news-list mt5 has-ad-list"> <li class="news-list-item"> <span class="range-type">01</span> <a href="http://www.tulaoshi.com/n/20160129/1483586.html">弹出网页窗口全攻略</a> </li> <li class="news-list-item"> <span class="range-type">02</span> <a href="http://www.tulaoshi.com/n/20160129/1483555.html">鼠标右键显隐效果</a> </li> <li class="news-list-item"> <span class="range-type">03</span> <a href="http://www.tulaoshi.com/n/20160129/1483553.html">仿 Office 2003 的工具条</a> </li> <li class="news-list-item"> <span class="range-type">04</span> <a href="http://www.tulaoshi.com/n/20160129/1483552.html">禁止右键、Ctrl键和复制功能的JS代码</a> </li> </ul> </div> </div> <div class="site-output"><script>tls.output.www_news('right4_300')</script></div> </div> <div class="fixed-right"> <div class="hop_gg clearfix"> <h3>精华推荐</h3> <div class="jinghua-list"> <dl class="jinghua-item clearfix"> <dt class="jinghua-item-img fl"> <a href="http://www.tulaoshi.com/n/20161220/2603368.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201612/20/0e83fa5f1459c3016ecfb55243fb55af.jpg" alt="阳台怎样封装 阳台封装的方法"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="http://www.tulaoshi.com/n/20161220/2603368.html">阳台怎样封装 阳台封装的方法</a> </p> <p class="jinghua-item-tag">木木夕</p> </dd> </dl> <dl class="jinghua-item clearfix"> <dt class="jinghua-item-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1598314.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/b842146199c02cd38f3a795e5eac4916_thumb_189.jpg" alt="js计数器代码"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="http://www.tulaoshi.com/n/20160219/1598314.html">js计数器代码</a> </p> <p class="jinghua-item-tag">起个名也麻烦C</p> </dd> </dl> <div class="site-output"><script>tls.output.www_news('right5_300')</script></div> <dl class="jinghua-item clearfix"> <dt class="jinghua-item-img fl"> <a href="http://www.tulaoshi.com/n/20160219/1597594.html"> <img class="cover-img scale-img" src="http://img.tulaoshi.com/201602/19/5a5a5bf676d4fb92b09e0576b884f047_thumb_189.jpg" alt="android控件封装 自己封装的dialog控件"> </a> </dt> <dd> <p class="jinghua-item-tit"> <a href="http://www.tulaoshi.com/n/20160219/1597594.html">android控件封装 自己封装的dialog控件</a> </p> <p class="jinghua-item-tag">独孤灬求爱</p> </dd> </dl> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right6_300')</script></div> <!--百科推荐--> <div class="hop_gg clearfix"> <h3>热门标签</h3> <div class="hot-tag-box-item"> <a class="hot-tag col_9" href="http://www.tulaoshi.com/luyouqishezhi/" title="路由器设置">路由器设置</a> <a class="hot-tag col_9" href="http://www.tulaoshi.com/js/" title="JS">JS</a> <a class="hot-tag col_3" href="http://www.tulaoshi.com/luyouqizenmeshezhi/" title="路由器怎么设置">路由器怎么设置</a> <a class="hot-tag col_6" href="http://www.tulaoshi.com/shezhiwuxianluyouqi/" title="设置无线路由器">设置无线路由器</a> <a class="hot-tag col_2" href="http://www.tulaoshi.com/shijian/" title="时间">时间</a> <a class="hot-tag col_5" href="http://www.tulaoshi.com/chengrenkaoshideshijian/" title="成人考试的时间">成人考试的时间</a> <a class="hot-tag col_9" href="http://www.tulaoshi.com/putaozhongzhideshijian/" title="葡萄种植的时间">葡萄种植的时间</a> <a class="hot-tag col_8" href="http://www.tulaoshi.com/wifishezhi/" title="wifi设置">wifi设置</a> <a class="hot-tag col_7" href="http://www.tulaoshi.com/dianreshuiqizenmeyong/" title="电热水器怎么用">电热水器怎么用</a> <a class="hot-tag col_7" href="http://www.tulaoshi.com/shuiguangzhenweichideshijian/" title="水光针维持的时间">水光针维持的时间</a> <a class="hot-tag col_8" href="http://www.tulaoshi.com/chichengzidezuijiashijian/" title="吃橙子的最佳时间">吃橙子的最佳时间</a> <a class="hot-tag col_7" href="http://www.tulaoshi.com/huaiyunshijian/" title="怀孕时间">怀孕时间</a> <a class="hot-tag col_8" href="http://www.tulaoshi.com/excelshezhibiaotou/" title="Excel设置表头">Excel设置表头</a> <a class="hot-tag col_1" href="http://www.tulaoshi.com/yongshuyezuodehua/" title="用树叶做的画">用树叶做的画</a> <a class="hot-tag col_4" href="http://www.tulaoshi.com/yatuishijian/" title="压腿时间">压腿时间</a> <a class="hot-tag col_5" href="http://www.tulaoshi.com/taijiaoshijian/" title="胎教时间">胎教时间</a> <a class="hot-tag col_4" href="http://www.tulaoshi.com/duannaishijian/" title="断奶时间">断奶时间</a> <a class="hot-tag col_8" href="http://www.tulaoshi.com/excelshezhibiaotoudeduozhongfangfa/" title="Excel设置表头的多种方法">Excel设置表头的多种方法</a> <a class="hot-tag col_3" href="http://www.tulaoshi.com/quyandaishoushudezuijiashijian/" title="去眼袋手术的最佳时间">去眼袋手术的最佳时间</a> <a class="hot-tag col_1" href="http://www.tulaoshi.com/shoulianqideyongfa/" title="瘦脸器的用法">瘦脸器的用法</a> </div> </div> <div class="contain-right site-output"><script>tls.output.www_news('right0_300')</script></div> </div> </div> <div class="float_bottom js-share-box" id="fixbottom"> <div class="float_bot_1"> <a href="javascript:;" class="icon-share icon-share71" id="weixin_show_btn"></a> <img src="https://pan.baidu.com/share/qrcode?w=150&h=150&url=http://m.tulaoshi.com/n/20160129/1483541.html" style="right:0;left:0;top:-130px;display:none; border:1px solid #e5e5e5; background:#fff; padding:10px; width:100px" id="weixin_show"> </div> <a href="javascript:;" class="icon-share icon-share11 js-share-weibo">微博分享</a> <a href="javascript:;" class="icon-share icon-share21 js-share-qq">QQ分享</a> <a href="javascript:;" class="icon-share icon-share31 js-share-qzone">QQ空间</a> <a href="http://m.tulaoshi.com/n/20160129/1483541.html" class="icon-share icon-share41">手机页面</a> <a href="javascript:;" class="icon-share icon-share51" id="fav_site_btn" data-url="http://www.tulaoshi.com/n/20160129/1483541.html">收藏网站</a> <a href="javascript:;" class="icon-share icon-share61" id="totop">回到头部</a> </div> <div class="c_xins" style="display:none;"> <a href="http://m.tulaoshi.com/n/20160129/1483541.html"> 用js封装的时间设置器 移动版</a> </div> </div> <!--footer底部--> <script type="text/javascript">tls.output.show_foot();</script> <!-- 尾部 --> <!--www_news PC内容页面--> <script src="http://static.tulaoshi.com/js/pc_show.min.js"></script> </body> </html>