请用HTML5和JavaScript实现九九乘法表,奇数行的背景颜色是黄色,偶数行的背景颜色是蓝色
时间: 2024-09-26 08:09:35 浏览: 48
JavaScript实现99乘法表及隔行变色实例代码
要使用HTML5和JavaScript实现一个九九乘法表,并根据行的奇偶性设置背景颜色,你可以按照下面的步骤操作:
首先,在HTML部分创建一个表格结构:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style>
table {
border-collapse: collapse;
}
tr:nth-child(even) {
background-color: blue;
}
tr:nth-child(odd) {
background-color: yellow;
}
</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 + 'x' + j + ' = ' + i*j;
}
}
};
```
这个代码会在页面加载完成后,生成一个9x9的乘法表。奇数行有黄色背景,偶数行有蓝色背景。
阅读全文