js实现两个按钮增加减少数量
效果如图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业</title> <!--加减样式--> <style> .count { width: 30px; height: 30px; color: #ff0036; border: none; font-size: 20px; font-weight: 600; cursor: pointer; } #reduce { color: #a9a9a9; } </style> </head> <body> //两个按钮，一个加，一个减，一个输入框，输入框初始值1，js效果会更改value的值 <div class="select-count"> <button class="count" id="plus" onclick="pluscount()">+</button> <input type="text" id="text" value="1"/> <button class="count" id="reduce" onclick="reducecount()">-</button> </div> <!--加减js--> <script> //增加函数 function pluscount() { //得到input输入框 var i = document.getElementById("text"); //将value的字符型转为数字类型 var value = parseInt(i.getAttribute("value")); //规定value上限200，setAttribute后加属性名和属性值 if (value <=200){ i.setAttribute("value",++value); } } //减少函数 function reducecount() { var i = document.getElementById("text"); var value = parseInt(i.getAttribute("value")); //在value的值大于0的情况下，value的值跟随增加按钮增加 if (value>0){ i.setAttribute("value", --value); } } // jquery的做法 // $('.plus').click(function () { // let value = parseInt($('.text').attr('value')); // if (value<=200){ // $('.text').attr('value',++value); // } // }) // $('.reduce').click(function () { // let value = parseInt($('.text').attr('value')); // if (value>1){ // $('.text').attr('value',--value); // } // }) </script> </body> </html>