JS-按鈕加減操作
阿新 • • 發佈：2018-11-11
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> button{ width:40px; height:40px; font-size:24px; vertical-align:bottom; } #num{ box-sizing:border-box; height:40px; width:60px; font-size:24px; text-align:center; } </style> </head> <body> <div> <button onclick="btnOperate('-')">-</button> <input id="num" value="1"> <button onclick="btnOperate('+')">+</button> </div> <script src="common.js"></script> <script> function btnAdd(){ //1、獲取#num的value var value = document.getElementById("num").value; //2、將取出來的值做+1操作，再賦值給#num的value value = Number(value) + 1; document.getElementById("num").value = value; } function btnReduce(){ //1、獲取#num的值 var value = Number(document.getElementById("num").value); //2、判斷#num的值是否小於等於1，如果小於等於1的話，則將值改為1 //3、否則，可以實現 - 1 操作 if(value <= 1){ value = 1; }else{ value -= 1; } //4、將 value 的值賦值給 #num document.getElementById("num").value = value; } /** * 做 數值的更改操作 * 引數 op ：表示 符號 */ function btnOperate(op){ var value = Number($("num").value); if(op == '+'){ value += 1; }else if(op == '-'){ if(value <= 1){ value = 1; }else{ value -= 1; } } $("num").value=value; } </script> </body> </html>
