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

相关推荐
清灵xmf1 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
小白白一枚1112 小时前
css实现div被图片撑开
前端·css
薛一半2 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾2 小时前
CSS综合练习——懒羊羊网页设计
前端·css
过期的H2O23 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage3 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
顾菁寒3 小时前
WEB第二次作业
前端·css·html
你好龙卷风!!!3 小时前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js
Qhumaing3 小时前
html第一个网页
网络·html·html5
shenweihong5 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序