jQuery 带加减按钮的数字输入框 

 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>

 

posted @ 2021-04-12 20:14  每天进步多一点  阅读(537)  评论(0)    收藏  举报