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

相关推荐
J总裁的小芒果8 分钟前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen9610 分钟前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
辣条小哥哥12 分钟前
electron主进程和渲染进程之间的通信
javascript·electron·ecmascript
咖喱鱼蛋13 分钟前
Electron一些概念理解
前端·javascript·electron
yqcoder14 分钟前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鸽鸽程序猿3 小时前
【前端】CSS
前端·css
ggdpzhk3 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲4 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•5 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS6 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264