<!doctype html> <html> <head> <title>計算器</title> <meta charset="utf-8"> <script type="text/javascript"> //參數e用來接收傳入的event事件 function cal(e){ //1.獲取事件源，只處理button事件 //瀏覽器兼容性 var obj=e.srcElement || e.target; if(obj.nodeName != "INPUT"){ return; } var value=obj.value; var p=document.getElementById("screen"); if(value == "C"){ //2.如果是[C],清空p p.innerText=""; }else if(value == "="){ //3.如果是[=],則運算 try{ var sum=parseFloat(eval("("+p.innerText+")")).toFixed(8); p.innerText=sum; }catch(e){ //發生異常,給予錯誤提示 p.innerText="Err"; } }else{ //4.其他將value追加到p中 p.innerText=p.innerText+value; } } </script> <style type="text/css"> .panel{ border: 3px solid #ccc; width: 160px; margin: 150px auto; } p{ border: 1px solid #ccc; height: 28px; width: 70%; margin: 5px 3px; line-height: 28px; font-family: '微軟雅黑','文泉驛正體','黑體'; } input{ display: block; width: 30px; height: 30px; margin: 5px 5px; background-color: #ccc; border: 0; float: left; } p{ display: block; float: left; } </style> </head> <body> <div class="panel" onclick="cal(event);"> <div class="display"> <p id="screen"></p> <input type="button" value="C"> <!--此div用來消除浮動影響,設置為不可見--> <div style="border:0;clear:left;"></div> </div> <div class="opreator"> <input type="button" value="7"> <input type="button" value="8"> <input type="button" value="9"> <input type="button" value="/"> <input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"> <input type="button" value="*"> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input type="button" value="-"> <input type="button" value="0"> <input type="button" value="."> <input type="button" value="="> <input type="button" value="+"> <!--此div用來消除浮動影響,設置為不可見--> <div style="border:0;clear:left;"></div> </div> </div> </body> </html>