网站微信二维码悬浮建站优化信息推广
html5&css&js代码 003 50以内的乘法算式
- 一、代码
- 二、解释
综合应用代码示例。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函数，确保乘法表格能及时生成并显示在页面上。