html5&css&js代码 002 一些基本概念 50以内的加法算式
- 一、代码
- 二、解释
50以内的加法算式。
一、代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>50以内的加法算式</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 设置表格样式 */
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black; /* 表格边框 */
padding: 8px; /* 单元格内边距 */
text-align: left; /* 文本对齐方式 */
}
</style>
<script>
/*生成50以内的加法算式表格*/
function generateAdditionEquations() {
let html = '';
// 双重循环生成所有加法算式
for(let i = 1; i <= 50; i++) {
for(let j = 1; j <= i; j++) {
// 每九个算式换一行
if((j % 9) === 1) {
html += '<tr>';
}
// 生成每个算式单元格
html += `<td>${i} + ${j} = ${i+j}</td>`;
// 每九个算式或当前行最后一个算式关闭行
if((j % 9) === 0 || i === j) {
html += '</tr>';
}
}
}
// 将生成的HTML字符串插入表格
document.getElementById('additionTable').innerHTML = html;
}
// 页面加载完成后自动调用生成函数
window.addEventListener('load', generateAdditionEquations);
</script>
</head>
<body>
<!--本页的主要内容是展示通过javascript生成表格-->
<h2>
50以内的加法算式，请使用Ctrl+=和Ctrl+-来放大或缩小
</h2>
<table id="additionTable">
<tbody>
</tbody>
</table>
</body>
</html>
二、解释
该HTML代码定义了一个页面，用于生成50以内的加法算式的表格。页面加载完成后，通过JavaScript函数generateAdditionEquations动态生成加法算式，并将其插入到HTML表格中进行展示。
<style>标签内定义了表格的样式，包括边框、内边距、文本对齐方式等。
<script>标签内定义了generateAdditionEquations函数，该函数通过双重循环生成所有加法算式，并将生成的HTML字符串插入到具有id="additionTable"的表格元素中。
使用window.addEventListener(‘load’, generateAdditionEquations)来监听页面加载完成事件，确保在页面加载完成后自动调用generateAdditionEquations函数。
页面的主要内容是一个标题和一个空的表格，表格的id为additionTable，用于动态插入生成的加法算式。
