好东东：模拟word中“视图/显示比例/百分比”的递增，递减按钮

[龙威]

<?
/*
* 模拟word中“视图/显示比例/百分比”的递增，递减按钮
*
* 在CMS系统中，经常要用到类似的按钮，而HTML中没有此类控件，我自己用图片模拟了一个，可以用的。
*
* 参数： $elementName 为该表单的 name 属性值，默认为 “orderId+随机数”，可以为空
* $initValue 为该表单的初始化值，默认为0，可以为空
*
* Feedback: Longware <[e-mail]>
*
*/
function btnIncreaseDegression($elementName="",$initValue="0")
{
$randId = intval(rand(0,9999));
if(empty($elementName)) $elementName = "orderId".$randId;
?>
<script language="JavaScript">
function chgOrder<?=$randId?>(id)
{
//id=1,递增;id=0,递减
var obj = document.getElementById("order<?=$randId?>");
var orderValue = parseInt(obj.value);
if(isNaN(orderValue)||orderValue<0) orderValue=0;
orderValue = (id) ? (orderValue+1) : (orderValue-1);
orderValue = (orderValue<0) ? 0 : orderValue;
orderValue = (orderValue>9999) ? 9999 : orderValue;
obj.value = orderValue;
}
</script>
<table border="0" cellpadding="0" cellspacing="0" width="56">
<tr>
<td><img src="images/spacer.gif" width="4" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="32" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="17" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="3" height="1" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0"></td>
</tr>
<tr>
<td colspan="4"><img src="images/spin_r1_c1.gif" width="56" height="4" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="4" border="0"></td>
</tr>
<tr>
<td rowspan="3"><img src="images/spin_r2_c1.gif" width="4" height="17" border="0"></td>
<td rowspan="2"><input type="text" name="<?=$elementName?>" id="order<?=$randId?>" value="<?=$initValue?>" maxlength="4" style="font-size:12px;height:13px;width:32px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px" onKeypress="if(event.keyCode<45 || event.keyCode>57) event.returnValue=false;"></td>
<td><img border="0" src="images/spin_up_keyon.gif" width="17" height="7" onMouseDown="this.src='images/spin_up_keydown.gif';chgOrder<?=$randId?>(1);" onMouseUp="this.src='images/spin_up_keyon.gif'" alt="递增"></td>
<td rowspan="3"><img src="images/spin_r2_c4.gif" width="3" height="17" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="7" border="0"></td>
</tr>
<tr>
<td><img border="0" src="images/spin_down_keyon.gif" width="17" height="7" onMouseDown="this.src='images/spin_down_keydown.gif';chgOrder<?=$randId?>(0);" onMouseUp="this.src='images/spin_down_keyon.gif'" alt="递减"></td>
<td><img src="images/spacer.gif" width="1" height="7" border="0"></td>
</tr>
<tr>
<td colspan="2"><img src="images/spin_r4_c2.gif" width="49" height="3" border="0"></td>
<td><img src="images/spacer.gif" width="1" height="3" border="0"></td>
</tr>
</table>
<?
}
?>
<pre><? print_r($_REQUEST); ?></pre>
<hr>
<form method=post action="">
<? btnIncreaseDegression(); ?>
<? btnIncreaseDegression("www"); ?>
<? btnIncreaseDegression("ddd","43"); ?>
<br>
<input type="submit">
</form>

演示：http://61.175.230.54/123/spin_demo.php
下载：http://www.phpx.com/happy/attachment.php?s=&postid=389954

系本人原创，斑竹认为还不错的话，请“射精”！^=^

[shuzai]

不错
不过在什么地方可以使用？