js实现两个按钮增加减少数量
效果如图
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>作业</title> 6 <!--加减样式--> 7 <style> 8 .count { 9 width: 30px; 10 height: 30px; 11 color: #ff0036; 12 border: none; 13 font-size: 20px; 14 font-weight: 600; 15 cursor: pointer; 16 } 17 18 #reduce { 19 color: #a9a9a9; 20 } 21 </style> 22 <!--加减js--> 23 <script> 24 //增加函数 25 function pluscount() { 26 //得到input输入框 27 var i = document.getElementById("text"); 28 //将value的字符型转为数字类型 29 var value = parseInt(i.getAttribute("value")); 30 //规定value上限200，setAttribute后加属性名和属性值 31 if (value <=200){ 32 i.setAttribute("value",++value); 33 } 34 } 35 //减少函数 36 function reducecount() { 37 var i = document.getElementById("text"); 38 var value = parseInt(i.getAttribute("value")); 39 //在value的值大于0的情况下，value的值跟随增加按钮增加 40 if (value>0){ 41 i.setAttribute("value", --value); 42 } 43 } 44 </script> 45 </head> 46 <body> 47 //两个按钮，一个加，一个减，一个输入框，输入框初始值1，js效果会更改value的值 48 <div class="select-count"> 49 <button class="count" id="plus" onclick="pluscount()">+</button> 50 <input type="text" id="text" value="1"/> 51 <button class="count" id="reduce" onclick="reducecount()">-</button> 52 </div> 53 54 </body> 55 </html>
原文：https://www.cnblogs.com/here-I-am/p/11454895.html