|
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- CSS樣式 --> <style> * { padding: 0; margin: 0; } table { width: 800px; height: 350px; margin: 100px auto; text-align: center; border-collapse: collapse; } table, td { border: 1px solid #000; } </style> </head> <body> </body> <script> // 原始版 // document.write("<table>"); // var j = 1; // while (j <= 9) { // document.write("<tr>"); // var i = 1; // while (i <= j) { // document.write("<td>" + i + "*" + j + "=" + (i*j) + "</td>"); // i++; // } // document.write("</tr>"); // j++; // } // document.write("</table>"); // 附帶奇偶數(shù)換色版 document.write("<table>"); for (var h = 1; h <= 9; h++) { //循環(huán)行數(shù) // 奇偶數(shù)行換色 if (h % 2 == 1) { document.write("<tr style='background:pink;'>"); } else { document.write("<tr style='background:#6ff;'>"); } for (var g = 1; g <= h; g++) { //循環(huán)列數(shù)，且列要小于等于行數(shù) // 隔列變色 if (g % 2 == 1) { document.write("<td style='background:pink;'>" + g + "*" + h + "=" + g * h + "</td>"); } else { document.write("<td style='background:#6ff;'>" + g + "*" + h + "=" + g * h + "</td>"); } } document.write("</tr>"); } document.write("<table>"); </script> </html> |
|
|
