jQuery realizes the summary of digital addition and subtraction effects_jquery

When we submit an order for online shopping, there is usually a quantity selection control on the webpage, requiring the buyer to select the number of items to purchase. The developer will make this control so that fine-tuning operations such as addition and subtraction can be performed by clicking. Of course, you can also directly enter the number of pieces.

Add and subtract numbers left and right

For example, JD.com currently uses the effect of adding and subtracting numbers to the left and right when submitting orders. This effect is straightforward and easy to operate. We use the jquery.spinner.js plug-in to add and subtract numbers left and right, and the calling method is very simple.

Copy code The code is as follows:

The call is also very simple. First load the jquery library file and jquery.spinner.js, and then use the following code:

Copy code The code is as follows:

$('.spinner').spinner();

Bootstrap style, plus and minus on the right side

Bootstrap has been popular for a long time, and there are many kinds of applications based on bootstrap style. Let me introduce to you a digital addition and subtraction plug-in based on bootstrap, which can set the minimum value, maximum value, increment and decrement (step value), and Enter the numbers manually.

Copy code The code is as follows:

After loading the bootstrap related css and js files, you can directly see the page effect. If your project is based on bootstrap, you can call it directly.

You can also refer to the project address: https://github.com/xixilive/jquery-spinner to view relevant parameter settings.

jQuery ui style, addition and subtraction on the right side

jQuery ui also provides a number addition and subtraction plug-in, which can set the minimum value, maximum value, increment and decrement (step value), and manually enter numbers.

Copy code The code is as follows:

If your project uses jquery ui, you can call jquery ui to implement the function of adding and subtracting numbers.

Copy code The code is as follows:

$("#spinner").spinner({
max:10,
Min:0,
Step:2
});

The above are the methods I use in my project to add and subtract numbers with jQuery. They are compiled and shared with everyone. Although the functions are relatively simple, they are very practical.