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

相关推荐
Damon小智3 分钟前
从零开始XR开发:Three.js实现交互式3D积木搭建器
javascript·3d·xr
掘金安东尼18 分钟前
前端周刊434期(2025年9月29日–10月5日)
前端·javascript·面试
掘金安东尼28 分钟前
前端周刊433期(2025年9月22日–9月28日)
前端·javascript·github
井柏然31 分钟前
为什么打 npm 包时要将 Vue/React 进行 external 处理?
javascript·vite·前端工程化
江城开朗的豌豆1 小时前
uni-app弹层遮罩难题?看我如何见招拆招!
前端·javascript·微信小程序
江城开朗的豌豆1 小时前
小程序生命周期漫游指南:从诞生到落幕的完整旅程
前端·javascript·微信小程序
江城开朗的豌豆1 小时前
跨平台开发实战:我的小程序双端(iOS、安卓)开发指南
前端·javascript·微信小程序
艾小码2 小时前
前端路由的秘密:手写一个迷你路由,看懂Hash和History的较量
前端·javascript
千码君20168 小时前
React Native:快速熟悉react 语法和企业级开发
javascript·react native·react.js·vite·hook
暮之沧蓝10 小时前
Vue总结
前端·javascript·vue.js