首页请用HTML5和JavaScript实现九九乘法表，单数行背景颜色是黄色，双数行背景颜色是蓝色

请用HTML5和JavaScript实现九九乘法表，单数行背景颜色是黄色，双数行背景颜色是蓝色

时间: 2024-09-26 10:09:32 浏览: 32

要在HTML5和JavaScript中实现一个九九乘法表，并根据行数的奇偶性设置背景颜色，你可以这样做：首先，在HTML部分创建一个表格结构： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> table { border-collapse: collapse; width: 100%; } tr:nth-child(even) { background-color: blue; } tr:nth-child(odd) { background-color: yellow; } td { border: 1px solid black; padding: 5px; text-align: center; } </style> </head> <body> <table id="multiplicationTable"></table> <script src="main.js"></script> </body> </html> ``` 然后，在`main.js`文件中编写JavaScript脚本来填充乘法表： ```javascript window.onload = function() { var table = document.getElementById('multiplicationTable'); for (var i = 1; i <= 9; i++) { var row = table.insertRow(i); for (var j = 1; j <= i; j++) { var cell = row.insertCell(j); cell.textContent = i + " * " + j + " = " + (i * j); } } }; ``` 这个脚本会在页面加载完成后动态插入九九乘法表的单元格，并在每个单元格中显示相应的乘积。由于CSS已经设置好了行的背景颜色规则，单数行会是黄色，双数行则是蓝色。

阅读全文