模仿VS控件Numberdown，实现小时分钟秒的计时器
javascript模仿VS控件NumberDown控件的效果，并且实现小时分钟和秒的计时器，通过点击控件按钮上的上/下按钮增加或者减少时间。
效果图
示例效果点击这里
示例下载点击这里
TimePicker类库主要说明。小时/分钟/秒可以手动输入，如果输入的数据格式不正确会自动变为原始数据00.
构造函数参数speed：指定数字增长的速度，单位ms
方法render：将Numberdown计时器绘制到容器内并呈现出来，参数为容器的Id
方法getValue：获取小时，分钟，秒的值用冒号连接在一起的字符串
示例代码
原创文章，转载请注明出处：模仿VS控件Numberdown，实现小时分钟秒的计时器
效果图
示例效果点击这里
示例下载点击这里
TimePicker类库主要说明。小时/分钟/秒可以手动输入，如果输入的数据格式不正确会自动变为原始数据00.
构造函数参数speed：指定数字增长的速度，单位ms
方法render：将Numberdown计时器绘制到容器内并呈现出来，参数为容器的Id
方法getValue：获取小时，分钟，秒的值用冒号连接在一起的字符串
示例代码
+展开
-HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="tex/html;charset=utf-8" />
<title>模仿VS控件Numberdown，实现小时分钟秒的计时器--编程设计网</title>
<style type="text/css">
.timepicker{border:solid 1px #999;width:100px;font-size:13px;height:20px;}
.timepicker .left{float:left;width:75px;padding-left:5px;}
.timepicker .left input{width:20px;border:0px;text-align:center;height:16px;}
.timepicker .right{float:right;}
.timepicker .right img{cursor:pointer;}
</style>
<meta name="Keywords" content="javascript计时器，秒表计时器，VS 控件 NumberDown控件效果"/>
<meta name="Description" content="模仿VS控件NumberDown控件的效果，并且实现小时分钟和秒的计时器，通过点击控件按钮上的上/下按钮增加或者减少时间。"/>
</head>
<body>
开始时间<span id="spStart"></span><br >
结束时间<span id="spEnd"></span>
<script type="text/javascript">
function TimePicker(speed){
var me=this;
this.render=function(pId){
var dv=document.createElement('div');
dv.className='timepicker';
dv.innerHTML='<div class="left"><input type="text" maxlength="2" value="00" /><label>:</label><input type="text" maxlength="2" value="00"/><label>:</label><input type="text" maxlength="2" value="00" /></div>\
<div class="right"><img src="up.gif" title="增加" /><br /><img src="down.gif" title="减少" /></div><div style="clear:both"></div>';
document.getElementById(pId).appendChild(dv);
this.inputs=dv.getElementsByTagName('input');
this.imgs=dv.getElementsByTagName('img');
this.inputs[0].onblur=function(){me.inputBlurHandler(this,true);}
this.inputs[1].onblur=this.inputs[2].onblur=function(){me.inputBlurHandler(this);}
this.imgs[0].onmousedown=function(){me.imgMouseDownHandler(1);}
this.imgs[1].onmousedown=function(){me.imgMouseDownHandler(-1);}
this.imgs[0].onmouseup=this.imgs[1].onmouseup=function(){me.go=false;}
}
this.getValue=function(){return this.inputs[0].value+':'+this.inputs[1].value+':'+this.inputs[2].value;}
this.padding=function(v){if(v<10)return '0'+v.toString();return v;}
this.inputBlurHandler=function(obj,isHour){
if(!/^\d{1,2}$/.test(obj.value))obj.value='00';
else{
var v=parseInt(obj.value,10);
if((isHour&&v>=24)||(!isHour&&v>=60))obj.value='00';
}
}
this.increase=function(step){
var h=parseInt(this.inputs[0].value,10),m=parseInt(this.inputs[1].value,10),s=parseInt(this.inputs[2].value,10);
s+=step;
if(s>=60||s<0){m+=s<0?-1:1;s=s<0?59:0;}
if(m>=60||m<0){h+=m<0?-1:1;m=m<0?59:0;}
if(h>=24||h<0)h=h<0?23:0;
this.inputs[2].value=this.padding(s);
this.inputs[1].value=this.padding(m);
this.inputs[0].value=this.padding(h);
if(me.go)setTimeout(function(){me.increase(step);},speed);
}
this.imgMouseDownHandler=function(step){
this.go=true;
setTimeout(function(){me.increase(step);},speed);
}
}
var tp1=new TimePicker(200),tp2=new TimePicker(100);
tp1.render('spStart');
tp2.render('spEnd');
</script> </body></html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="tex/html;charset=utf-8" />
<title>模仿VS控件Numberdown，实现小时分钟秒的计时器--编程设计网</title>
<style type="text/css">
.timepicker{border:solid 1px #999;width:100px;font-size:13px;height:20px;}
.timepicker .left{float:left;width:75px;padding-left:5px;}
.timepicker .left input{width:20px;border:0px;text-align:center;height:16px;}
.timepicker .right{float:right;}
.timepicker .right img{cursor:pointer;}
</style>
<meta name="Keywords" content="javascript计时器，秒表计时器，VS 控件 NumberDown控件效果"/>
<meta name="Description" content="模仿VS控件NumberDown控件的效果，并且实现小时分钟和秒的计时器，通过点击控件按钮上的上/下按钮增加或者减少时间。"/>
</head>
<body>
开始时间<span id="spStart"></span><br >
结束时间<span id="spEnd"></span>
<script type="text/javascript">
function TimePicker(speed){
var me=this;
this.render=function(pId){
var dv=document.createElement('div');
dv.className='timepicker';
dv.innerHTML='<div class="left"><input type="text" maxlength="2" value="00" /><label>:</label><input type="text" maxlength="2" value="00"/><label>:</label><input type="text" maxlength="2" value="00" /></div>\
<div class="right"><img src="up.gif" title="增加" /><br /><img src="down.gif" title="减少" /></div><div style="clear:both"></div>';
document.getElementById(pId).appendChild(dv);
this.inputs=dv.getElementsByTagName('input');
this.imgs=dv.getElementsByTagName('img');
this.inputs[0].onblur=function(){me.inputBlurHandler(this,true);}
this.inputs[1].onblur=this.inputs[2].onblur=function(){me.inputBlurHandler(this);}
this.imgs[0].onmousedown=function(){me.imgMouseDownHandler(1);}
this.imgs[1].onmousedown=function(){me.imgMouseDownHandler(-1);}
this.imgs[0].onmouseup=this.imgs[1].onmouseup=function(){me.go=false;}
}
this.getValue=function(){return this.inputs[0].value+':'+this.inputs[1].value+':'+this.inputs[2].value;}
this.padding=function(v){if(v<10)return '0'+v.toString();return v;}
this.inputBlurHandler=function(obj,isHour){
if(!/^\d{1,2}$/.test(obj.value))obj.value='00';
else{
var v=parseInt(obj.value,10);
if((isHour&&v>=24)||(!isHour&&v>=60))obj.value='00';
}
}
this.increase=function(step){
var h=parseInt(this.inputs[0].value,10),m=parseInt(this.inputs[1].value,10),s=parseInt(this.inputs[2].value,10);
s+=step;
if(s>=60||s<0){m+=s<0?-1:1;s=s<0?59:0;}
if(m>=60||m<0){h+=m<0?-1:1;m=m<0?59:0;}
if(h>=24||h<0)h=h<0?23:0;
this.inputs[2].value=this.padding(s);
this.inputs[1].value=this.padding(m);
this.inputs[0].value=this.padding(h);
if(me.go)setTimeout(function(){me.increase(step);},speed);
}
this.imgMouseDownHandler=function(step){
this.go=true;
setTimeout(function(){me.increase(step);},speed);
}
}
var tp1=new TimePicker(200),tp2=new TimePicker(100);
tp1.render('spStart');
tp2.render('spEnd');
</script> </body></html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：模仿VS控件Numberdown，实现小时分钟秒的计时器