请问各位高手怎么实现下面这个功能

怎么实现点击上面的小图标就加一，点击下面的小图标就减一，当文本框的值为0的时候就不能再减了。网上很购物网站都用到的，但我不知道怎么实现这个功能，希望高人能指点一下，谢谢了！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript">
function add(n){
var num = document.getElementById("num");
var val = parseInt(num.value);
num.value = val + n >= 0 ? val + n : 0;
}
  </script>
</HEAD> <BODY>
<TABLE>
<TR>
<TD><input type="text" id="num" value="0" readonly="readonly" /></TD>
<TD><input type="button" value="+" onclick="add(1)" /><br/><input type="button" value="-" onclick="add(-1)"></TD>
</TR>
</TABLE>

</BODY>
</HTML>
num.value = val + n >= 0 ? val + n : 0;d
<script type="text/javascript">
function add(n){
    var obj=document.getElementById("txt1");
    if(parseInt(obj.value)==0 && n==-1)return;
    obj.value=parseInt(obj.value)+n;
}
</script>
<input id=txt1>
<img src="Water lilies.jpg" width=100 height=100 usemap="#green" border="0">
<map name="green">
<area shape="rect" coords="0,0,100,50%" onclick="add(1)">
<area shape="rect" coords="0,50%,100%,100%" onclick="add(-1)">
</map>
<TABLE border=0 cellpadding=0>
<TR>
<TD rowspan=2><INPUT TYPE="text" id="inp" NAME="inp" value="0"></TD>
<TD><INPUT TYPE="button" VALUE="^" style="height:10px; width:20px; border:1px solid gray" ONCLICK="test(1)"></TD>
</TR>
<TR>
<TD><INPUT TYPE="button" VALUE="Y" style="height:10px; width:20px; border:1px solid gray" ONCLICK="test(-1)"></TD>
</TR>
</TABLE>
  <SCRIPT LANGUAGE="JavaScript">
  
  </SCRIPT>