number of input type and style left and right to modify the bind button

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Jay Skript And The Domsters</title>
    <style type="text/css">
        *{border:none;margin:0px;padding:0px;}
        .number{ padding: 36px 0 28px;width:400px;margin:auto}
        .minus{width: 30px; height: 30px; text-align: center;border: solid 1px #eaeaea; background: #f5f5f5; color: #9e9e9e;}
        .numbox{border-top: solid 1px #eaeaea; border-bottom: solid 1px #eaeaea; height: 28px; width:60px; color: #333333; margin-left:-8px; text-align: center; background: transparent;}
        .plus { margin-left: -8px;}
    </style>
</head>
    Buy Quantity:
<body>
<div class="number">
    <div class="mui-numbox">
        <button class="minus" type="button" onclick="opera('val', false);">-</button>
        <input class="numbox" type="number" id="val" value="0"/>
        <button class="minus plus" type="button" onclick="opera('val', true);">+</button>
        人次
    </div>

    <script type="text/javascript">
        function opera(x, y) {
            var rs = new Number(document.getElementById(x).value);

            if (y) {
                document.getElementById(x).value = rs + 1;
            } else if( rs >0) {
                document.getElementById(x).value = rs - 1;
            }

        }
    </script>
</body>
</html>

  

Guess you like

Origin www.cnblogs.com/renewload/p/11227302.html
Recommended