日期:2014-05-16 浏览次数:20333 次
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <span id="add">+</span> <input type="text" value="0" id="text"/> <span id="reduce">-</span> <script> function $(id){ return document.getElementById(id); } var elems = { add: $('add'), reduce: $('reduce'), text: $('text') } elems.add.onclick = function(){ elems.text.value++; } elems.reduce.onclick = function(){ elems.text.value--; } </script> </body> </html>
------解决方案--------------------
<html> <head> <title></title> <style type="text/css"> span { border: 1px solid gray; cursor: pointer; color: Gray; height: 2px; width: 2px; } </style> <script type="text/javascript"> function autoPlusMinus() { var operator = event.srcElement.innerText; if (operator != "+" && operator != "-") { return; } var oldValue = number.value; if (isNaN(oldValue)) { number.value = "0"; } oldValue = parseFloat(number.value); number.value = eval(oldValue + operator + 1).toString(); } document.onclick = autoPlusMinus; </script> </head> <body> <span id="plus">+</span> <input id="number" type="text" value="0" style="width: 40px; text-align: center;" /> <span id="minus">-</span> </body> </html>