点击箭头图片文本框值加1解决方案-JavaSript-爱易网页

点击箭头图片文本框值加1解决方案

日期：2014-05-16　浏览次数：20429 次

点击箭头图片文本框值加1

请问像这样效果怎么实现呢

后面的上下箭头如何控制前面三个框呢
前面文本框不点击的时候，点击后面的上或下箭头，第一个方本框加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;&

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

点击箭头图片文本框值加1解决方案

相关资料更多>

推荐阅读更多>