综合应用代码示例。50以内的乘法算式。
一、代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>20以内的乘法</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>
/**
* 生成1到19以内乘法的表格
*/
function generateAdditionEquations() {
let html = '';
for(let i = 1; i <= 19; i++) {
html += '<tr>';
for(let j = 1; j <= i; j++) {
// 每九个算式换一行，以保持表格的整洁
if((j % 10) === 1) {
html += '<tr>';
}
html += `<td>${j} * ${i} = ${i*j}</td>`;
// 当j是10的倍数或者j等于i时，结束当前行的绘制
if((j % 10) === 0 || i === j) {
html += '</tr>';
}
}
html += '</tr>';
}
// 将生成的HTML表格代码注入到页面中
document.getElementById('additionTable').innerHTML = html;
}
// 页面加载完成后自动调用generateAdditionEquations函数
window.onload = generateAdditionEquations;
</script>
</head>
<body>
<!-- 乘法表格将在这里显示 -->
<table id="additionTable">
<tbody>
</tbody>
</table>
</body>
</html>
二、解释
这段HTML代码定义了一个页面，该页面在加载完成后会自动生成一个乘法表格，展示1到19以内的乘法算式。生成的表格样式为整洁的网格状，每个乘法算式都以单元格的形式呈现。
具体实现上，通过JavaScript函数generateAdditionEquations来生成HTML代码字符串，然后将其注入到页面指定的
页面加载完成后，通过window.onload事件自动调用generateAdditionEquations函数，确保乘法表格能及时生成并显示在页面上。
