html5&css&js代码 003 50以内的乘法算式

html5&css&js代码 003 50以内的乘法算式

综合应用代码示例。50以内的乘法算式。

一、代码

html 复制代码
<!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代码字符串,然后将其注入到页面指定的
元素中。函数使用嵌套的循环遍历1到19之间的数字,生成对应的乘法算式,并按照每九个算式换一行的规则来组织表格的行。
页面加载完成后,通过window.onload事件自动调用generateAdditionEquations函数,确保乘法表格能及时生成并显示在页面上。

相关推荐
-代号95279 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
QTX187301 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
明月看潮生1 小时前
青少年编程与数学 02-015 大学数学知识点 01课题、概要
青少年编程·高等数学·编程与数学·大学数学
明月看潮生2 小时前
青少年编程与数学 02-014 高中数学知识点 07课题、专业相关性分析
青少年编程·高中数学·编程与数学
明月看潮生2 小时前
青少年编程与数学 02-015 大学数学知识点 03课题、概率论和数理统计
青少年编程·概率论·数理统计·编程与数学·大学数学
猿榜2 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队2 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Mintopia3 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia3 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js