电商网站中采购货品的数量栏的样式

今天突然觉得数量这个样式挺好的，就拿来介绍一下。

1.首先写三个向左浮动的DIV，第一个放减号的图片，第二个放input标签（其他的也行），第三个放加号的图片。

2.当我们点击加号或减号的时候，文本框中的值会相应的变化，这是给图片增加了点击事件。

<div style="float: left; margin: 10px 2px;">
                                                <img src="images/jian.png" width="15" height="15" οnclick="javascript:fff_jian(this)" />
                                            </div>
                                            <div style="float: left; margin-top: 9px;">
                                                <input id="txtnum" name="txtnum" value="0" class="stext" style="width: 35px; height: 17px;" runat="server" />
                                            </div>
                                            <div style="float: left; margin: 10px 2px;">
                                                <img src="images/jia.png" width="15" height="15" οnclick="javascript:fff_jia(this)" />
                                            </div>

function fff_jian(jianef) {
            var $ss = $(jianef).parent().next().find("input");
            var oldnum = parseInt($ss.val());
            if (oldnum > 1) {
                var newnum = oldnum - 1;
                $ss.val(newnum);
            } else {
                var newnum = 1;
                $ss.val(newnum);
            }
        }
        function fff_jia(jiaef) {
            var $ss = $(jiaef).parent().prev().find("input");
            var oldnum = parseInt($ss.val());
            var newnum = oldnum + 1;
            $ss.val(newnum);
        }

3.在id为txtnum的文本框中，我增加了 runat="server"属性，这样，文本框中的值就可以在后台用C#代码获取了。如果不加，则可以用JS或jQuery来获取，这个就看个人爱好了。

string num = txtnum.Value;