请问像这样效果怎么实现呢后面的上下箭头如何控制前面三个框呢
前面文本框不点击的时候，点击后面的上或下箭头，第一个方本框加1或减1，
如果光标放到第二个文本框后点击向上或向下箭头时，第二个方本框加1或减1，
同理放到第三个时，第三个加1或减1相当于WdatePicker里的时间效果
<!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="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ margin:100px; padding:0px; font-size:12px; color:#000; }
.div1 { background:#ccc; width:110px; height:22px; line-height:22px; color:#000; float:left; }
.input { border:none; background:none; color:#000; width:30px; height:22px; text-align:center; line-height:22px; }
</style>
<script>
function up(){
var h=document.getElementById("hour")
h.value=parseFloat(h.value)+parseFloat(1)
}
function down(){
var h=document.getElementById("hour")
h.value=parseFloat(h.value)-parseFloat(1)
}
</script>
</head><body>
<div class="div1">
<input type="text" id="hour" name="hour" class="input" maxlength="2" value="1"/>:
<input type="text" id="minute" name="minute" class="input" maxlength="2" value="12" />:
<input type="text" id="second" name="second" class="input" maxlength="2" value="50" />
</div>
<div style="width:12px; float:left;background:#ccc;">
<div onclick="up()" id="up" style="float:left;"><img src="http://img.bbs.csdn.net/upload/201310/30/1383146222_390274.gif" width="12" height="11" /></div>
<div onclick="down()" style="float:left;"><img src="http://img.bbs.csdn.net/upload/201310/30/1383146234_136108.gif" width="12" height="11" /></div>
</div>
</body>
</html>
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="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ margin:100px; padding:0px; font-size:12px; color:#000; }
.div1 { background:#ccc; width:110px; height:22px; line-height:22px; color:#000; float:left; }
.input { border:none; background:none; color:#000; width:30px; height:22px; text-align:center; line-height:22px; }
</style>
<script>
var selectedInput;
function setInput(input) {
selectedInput = input;
}
function getInput() {
return selectedInput || document.getElementById("hour");
}
function up(){
var h=getInput();
h.value=parseFloat(h.value)+parseFloat(1);
}
function down(){
var h=getInput();
h.value=parseFloat(h.value)-parseFloat(1);
}
</script>
</head>
<body>
<div class="div1">
<input type="text" id="hour" name="hour" class="input" maxlength="2" value="1" onfocus="setInput(this)" />:
<input type="text" id="minute" name="minute" class="input" maxlength="2" value="12" onfocus="setInput(this)" />:
<input type="text" id="second" name="second" class="input" maxlength="2" value="50" onfocus="setInput(this)" />
</div>
<div style="width:12px; float:left;background:#ccc;">
<div onclick="up()" id="up" style="float:left;"><img src="http://img.bbs.csdn.net/upload/201310/30/1383146222_390274.gif" width="12" height="11" /></div>
<div onclick="down()" style="float:left;"><img src="http://img.bbs.csdn.net/upload/201310/30/1383146234_136108.gif" width="12" height="11" /></div>
</div>
</body>
</html>