数字微调输入框

<script>

function createComboxImg(pid,clickHandler){
 if( document.all(pid).children(0) ){
  return;
 }
    var btn = document.createElement("BUTTON");
    btn.appendChild(document.createTextNode(6));
    btn.className = "combo-button";
 btn.onfocus = function () { this.blur(); };
 btn.onclick = clickHandler;
 document.all(pid).appendChild(btn);
 return btn;
}

function init(){
 var dateList = new Array("cutOffDate","sailingDate");
 for(var i=0;i<dateList.length;i++) {
  createComboxImg(dateList[i]+"Div",new Function("getCalendar(\""+dateList[i]+"\")"));
 }
 createNumberClicker("num","up","down");
}

function getCalendar(textId){
 var obj = document.all(textId);
 popUpCalendar(obj, obj, "yyyy-mm-dd");
}

function popUpCalendar(a,b,c){
 alert("Here to pop up the calendar.");
}

function createNumberClicker(source,uper,downer){
 var text = document.all(source);
    var btnUp = document.createElement("BUTTON");
    btnUp.appendChild(document.createTextNode(5));
    btnUp.className = "combo-button-up";
 btnUp.onfocus = function(){ this.blur(); };
 btnUp.onclick = function(){ if(text.value)text.value++;};
 document.all(uper).appendChild(btnUp);
    var btnDown = document.createElement("BUTTON");
    btnDown.appendChild(document.createTextNode(6));
    btnDown.className = "combo-button-down";
 btnDown.onfocus = function(){ this.blur(); };
 btnDown.onclick = function(){ if(text.value)text.value--;};
 document.all(downer).appendChild(btnDown);
}

</script>
<style>
.combo-button {
 cursor:   pointer; 
 height:   22px;
 border:   1px solid #A5ACB2;
 border-left-width: 0px;
 padding:  0;
 background:  buttonface;
 width:   14px;
 vertical-align: baseline;
 font-size:  8pt;
 font-family: Webdings, Marlett;
}
.combo-button-up {
 cursor:   pointer; 
 height:   11px;
 border:   1px solid #A5ACB2;
 border-left-width: 0px;
 padding:  0;
 background:  buttonface;
 width:   14px;
 vertical-align: baseline;
 font-size:  5pt;
 font-family: Webdings, Marlett;
}
.combo-button-down {
 cursor:   pointer; 
 height:   11px;
 border:   1px solid #A5ACB2;
 border-left-width: 0px;
 border-top-width: 0px;
 padding:  0;
 background:  buttonface;
 width:   14px;
 vertical-align: baseline;
 font-size:  5pt;
 font-family: Webdings, Marlett;
}
.combo-text {
 height:   22px;
 border:   1px solid #A5ACB2;
 
}
</style>
<body onload="init();">
<div><input name="cutOffDate" id="cutOffDate" style="width:76px " class="combo-text"><span id="cutOffDateDiv" style="width:14px "></span></div>
<div><input name="sailingDate" id="sailingDate" style="width:76px " class="combo-text"><span id="sailingDateDiv" style="width:14px "></span></div>

<div><table border="0" cellpadding="0" cellspacing="0" ><tr><td><input name="num" id="num" style="width:76px " class="combo-text" value="10"></td><td><table border="0" cellpadding="0" cellspacing="0"><tr><td><span id="up" style="width:14px" valign="top"></span></td></tr><tr><td><span id="down" style="width:14px"></span></td></tr></table></td></tr></table></div>

</body>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值