html5&css&js代码 002 一些基本概念 50以内的加法算式
50以内的加法算式。
一、代码
<!DOCTYPEhtml><htmllang="en"><head><title>50以内的加法算式</title><metacharset="UTF-8"><metaname="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以内的加法算式表格*/functiongenerateAdditionEquations(){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><tableid="additionTable"><tbody></tbody></table></body></html>
二、解释
该HTML代码定义了一个页面，用于生成50以内的加法算式的表格。页面加载完成后，通过JavaScript函数generateAdditionEquations动态生成加法算式，并将其插入到HTML表格中进行展示。
<style>
标签内定义了表格的样式，包括边框、内边距、文本对齐方式等。
<script>
标签内定义了generateAdditionEquations函数，该函数通过双重循环生成所有加法算式，并将生成的HTML字符串插入到具有id="additionTable"的表格元素中。
使用window.addEventListener(‘load’, generateAdditionEquations)来监听页面加载完成事件，确保在页面加载完成后自动调用generateAdditionEquations函数。
页面的主要内容是一个标题和一个空的表格，表格的id为additionTable，用于动态插入生成的加法算式。
本文转载自: https://blog.csdn.net/qq_40071585/article/details/136562927
版权归原作者 明月看潮生 所有， 如有侵权，请联系我们删除。
版权归原作者 明月看潮生 所有， 如有侵权，请联系我们删除。