代码执行后的结果:按加减号数字可以加减。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; } .left{ float: left; } .wrap{ width: 150px; height: 22px; border: 1px solid #ddd; /*background-color: red;*/ position: relative; left: 100px; top: 100px; } .wrap .minus{ height: 22px; width: 22px; line-height: 22px; text-align: center; cursor: pointer; } .wrap .plus{ height: 22px; width: 22px; line-height: 22px; text-align: center; cursor: pointer; /*当鼠标指的时候变样式*/ } .wrap .count input{ padding: 0; /*input是有padding的*/ border: 0; width: 104px; height: 22px; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; } </style> </head> <body> <div class="wrap"> <div class="minus left" onclick=‘Minus();‘>-</div> <div class="count left"> <input id=‘count‘ type="text" /> </div> <div class="plus left" onclick=‘Plus();‘>+</div> </div> <script type="text/javascript"> function Plus(){ var old_str = document.getElementById(‘count‘).value var old_int = parseInt(old_str); var new_int = old_int + 1 document.getElementById(‘count‘).value = new_int } function Minus(){ var old_str = document.getElementById(‘count‘).value var old_int = parseInt(old_str); var new_int = old_int - 1 document.getElementById(‘count‘).value = new_int } </script> </body> </html> cursor:pointer; /*鼠标尖头变小手*/
时间: 2024-11-04 09:20:58