三、HarmonyOS 应用开发入门之运行Hello World-CFANZ编程社区

html5&css&js代码 002 一些基本概念 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，用于动态插入生成的加法算式。