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，用于动态插入生成的加法算式。
