效果圖：
剛開始做時沒考慮到清零和退格兩個功能，嘻嘻，后來加的整體與傳統(tǒng)計算器比有點(diǎn)小瑕疵。
代碼：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>js簡單計算器</title><style type="text/css">*{margin:0px;padding:0px;}input{margin-top:2px;margin-left:2px;width:230px;height:30px;text-align:right;}button{margin-top:2px;margin-left:2px;width:50px;height:50px;}#container{margin-left:1px;border:1px solid #E4E4E4;background:#BBBBBB;width:235px;height:215px;}</style><script>function onLoad(){//加載完畢后光標(biāo)自動對應(yīng)到輸入框document.getElementById("input").focus();}//讀取按鈕的值，傳給輸入框function inputEvent(e){//把val的值改為每個事件的innerHTML值var val=e.innerHTML;//獲取input標(biāo)簽var xsval=document.getElementById("input");//標(biāo)簽里的value連接每個事件的innerHTML值xsval.value+=val; }//計算出結(jié)果function inputOper(){var xsval=document.getElementById("input");xsval.value=eval(document.getElementById("input").value);}//清零function clearNum(){var xsval=document.getElementById("input");xsval.value="";document.getElementById("input").focus();}//退格function backNum(){var arr=document.getElementById("input");arr.value=arr.value.substring(0,arr.value.length-1);} </script></head><body onload="onLoad()"><input id="input" type="text"><div id="container"><div><button onclick="inputEvent(this)">1</button><button onclick="inputEvent(this)">2</button><button onclick="inputEvent(this)">3</button><button onclick="inputEvent(this)">+</button></div><div><button onclick="inputEvent(this)">4</button><button onclick="inputEvent(this)">5</button><button onclick="inputEvent(this)">6</button><button onclick="inputEvent(this)">-</button></div><div><button onclick="inputEvent(this)">7</button><button onclick="inputEvent(this)">8</button><button onclick="inputEvent(this)">9</button><button onclick="inputEvent(this)">*</button></div><div><button onclick="inputEvent(this)">0</button><button onclick="inputEvent(this)">.</button><button onclick="inputOper(this)">=</button><button onclick="inputEvent(this)">/</button></div></div><button onclick="clearNum()">清零</button><button onclick="backNum()">退格</button></body></html>
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點(diǎn)
疑難解答
