<!doctype html> <html> <head> <meta charset="utf-8"> <title>簡易計算器</title> <style> #div{ width: 300px; height: 500px; background: #ccc; margin: auto; border: 1px solid red; } table{ width: 97%; height: 480px; border: 1; align:center; cellspacing:"10" } td{ width: 26%; height: auto; border: 1px solid red; text-align: center; font-weight: bold; color: blue; } </style> <script> var tds = null; //定義一個空的全局對象 var jg = null, dy = null, tg = null; window.onload = function(){ //因為以后都是外部引用JS文件，因為程序加載執行順序的問題，設置一個文檔加載完成后調用方法的事件 tds = document.getElementsByTagName("td"); //找到所有的對象 jg = document.getElementById("jg"); dy = document.getElementById("dy"); tg = document.getElementById("tg"); addEvent(); //文檔加載完成后調用這個方法 } function addEvent(){ for(var i = 0 ;i<tds.length;i++){ //循環下標用來找出所有的單元格 var zhi = tds[i].getAttribute("id"); //找出帶id屬性的單元格 if(zhi){ //當本次循環有帶id屬性的 continue; //那么跳過本次循環 } tds[i].onclick = function(){ //后給這個單元格添加點擊事件並調用方法 jg.innerHTML += this.innerHTML; //此處用到字符串拼接的方法 每點擊一次和上一次的字符串拼接（用來作為下邊的計算） } } //給等於號添加點擊事件 dy.onclick = function(){ //當點擊等於號的時候 jg.innerHTML = eval(jg.innerHTML); //結果顯示在HTML文檔中並賦值（eval（）函數會將字符串轉換為JavaScript代碼執行） } //當點擊退格的時候調用這個函數 tg.onclick = function(){ var str = jg.innerHTML; //找到在結果顯示中的字符串 jg.innerHTML = str.substr(0,str.length-1); //賦值（substr()這個是字符串方法，用來截取（保留）從0到倒數第二個，也就是當每次點擊的時候會退一格） } } </script> </head> <body> <!--在div里面創建一個表格用來作為計算器的按鍵使用--> <div id="div"> <!--這個id用來設置計算器面板的樣式--> <table> <tr> <td colspan="3" id="jg"></td> <!--這里作為顯示使用--> <td id="tg">退格</td> <!--加退格功能--> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> <td>/</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td>+</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>-</td> </tr> <tr> <td>.</td> <td>0</td> <td id="dy">=</td> <!--准備給等於號單獨設置點擊事件並調用方法--> <td>*</td> </tr> </table> </div> </body> </html>