1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 .c1{ 11 top: 10px; 12 left: 10px; 13 position: relative; 14 width: 150px; 15 height: 22px; 16 border: 1px solid black; 17 padding-right: -22px; 18 } 19 .c2{ 20 position: absolute; 21 width: 22px; 22 height: 22px; 23 24 line-height: 22px; 25 text-align: center; 26 background-color: #dce7f4; 27 border-right: 1px solid black; 28 cursor: pointer; 29 } 30 .c3{ 31 32 } 33 .c3 input{ 34 border: 0; 35 padding: 0; 36 position: absolute; 37 left: 23px; 38 width: 104px; 39 height: 22px; 40 line-height: 22px; 41 text-align: center; 42 43 44 } 45 46 .c4{ 47 right: 0; 48 position: absolute; 49 width: 22px; 50 height: 22px; 51 line-height: 22px; 52 text-align: center; 53 border-left: 1px solid black; 54 background-color: #dce7f4; 55 cursor: pointer; 56 } 57 58 </style> 59 </head> 60 <body> 61 <div class="c1"> 62 <div class="c2" onclick="Minus()">-</div> 63 64 <div class="c3"> 65 <input type="text" id="count" value="0" /> 66 </div> 67 68 <div class="c4" onclick="Plus()">+</div> 69 </div> 70 <script type="text/javascript"> 71 //定义函数 72 function Plus() { 73 var old_str = document.getElementById('count').value; 74 try{ 75 var old_int = parseInt(old_str); 76 }catch(e){ 77 var old_int = 1 78 } 79 var new_int = old_int + 1; 80 document.getElementById('count').value = new_int; 81 } 82 function Minus() { 83 var old_str = document.getElementById('count').value; 84 try{ 85 var old_int = parseInt(old_str); 86 }catch(e){ 87 var old_int = 1 88 } 89 var new_int = old_int - 1; 90 document.getElementById('count').value = new_int; 91 } 92 </script> 93 </body> 94 </html>