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函数,确保乘法表格能及时生成并显示在页面上。

相关推荐
拉不动的猪19 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
烛阴1 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
鹿九巫2 小时前
【CSS】层叠,优先级与继承(四):层叠,优先级与继承的关系
前端·css
卓怡学长2 小时前
w304基于HTML5的民谣网站的设计与实现
java·前端·数据库·spring boot·spring·html5
鱼樱前端2 小时前
前端必知必会:JavaScript 对象与数组克隆的 7 种姿势,从浅入深一网打尽!
前端·javascript
yzhSWJ2 小时前
Spring Boot中自定义404异常处理问题学习笔记
java·javascript
zyk_5204 小时前
前端渲染pdf文件解决方案-pdf.js
前端·javascript·pdf
大溪地C4 小时前
HTML5 详细学习笔记
笔记·学习·html5
沉迷...5 小时前
手动实现legend 与 echarts图交互 通过js事件实现图标某项的高亮 显示与隐藏
前端·javascript·echarts