1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>带加减按钮的数字输入框</title>
6 <meta name="keywords" content="ttt">
7 <meta name="description" content="aaa">
8 <script type="text/javascript" src="https://mydarling.gitee.io/resource/jQuery/jquery-1.9.1.min.js"></script>
9 <style type="text/css">
10 body{
11 margin: 0;
12 padding: 0;
13 font-size: 14px;
14 font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
15 letter-spacing: 0;
16 }
17 ol{
18 margin: 0;
19 padding: 20px 0 20px 30px;
20 }
21 ol>li{
22 margin: 0 0 10px 0;
23 }
24 .number-box{
25 border: #e5e5e5 solid 1px;
26 display: inline-block;
27 overflow: hidden;
28 }
29 .number-box input[type='text']{
30 height: 30px;
31 border-top: none;
32 border-bottom: none;
33 border-left:#e5e5e5 solid 1px;
34 border-right:#e5e5e5 solid 1px;
35 margin: 0;
36 text-align: center;
37 width: 40px;
38 outline:none;
39 padding: 0 5px;
40 float: left;
41 line-height: 30px;
42 }
43 .number-box input[type='button']{
44 height: 30px;
45 width: 40px;
46 float: left;
47 border: none;
48 outline:none;
49 background-color: #f3f3f3;
50 line-height: 30px;
51 cursor: pointer;
52 padding: 0;
53 }
54 .number-box input[type='button']:hover{
55 background-color: #f9f9f9;
56 }
57 .number-box input[type='button']:active{
58 background-color: #f6f6f6;
59 }
60 </style>
61 </head>
62 <body>
63 <ol>
64 <li>
65 <div class="number-box">
66 <input type="button" class="on-number" value="-" data-v="-1">
67 <input type="text" value="0">
68 <input type="button" class="on-number" value="+" data-v="1">
69 </div>
70 </li>
71 <li>
72 <div class="number-box">
73 <input type="button" class="on-number" value="-" data-v="-1">
74 <input type="text" value="-2">
75 <input type="button" class="on-number" value="+" data-v="1">
76 </div>
77 </li>
78 <li>
79 <div class="number-box">
80 <input type="button" class="on-number" value="-" data-v="-1">
81 <input type="text" value="9">
82 <input type="button" class="on-number" value="+" data-v="1">
83 </div>
84 </li>
85 </ol>
86 <script type="text/javascript">
87 $(document.documentElement).on("click",".on-number",function () {
88 var $val=$(this).siblings("input[type='text']"),
89 val=parseInt($val.val(),10)+parseInt($(this).data("v"));
90 $val.val(isNaN(val) ? 0 : val);
91 });
92 </script>
93 </body>
94 </html>
