【HTML+CSS+JavaScript】九九乘法表

最新推荐文章于 2023-03-02 12:57:46 发布

转载最新推荐文章于 2023-03-02 12:57:46 发布 · 442 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/neymargoal/p/9470986.html

本文介绍了一种使用HTML和JavaScript生成九九乘法表的方法。通过简单的代码实现了正序、倒序以及居中显示的乘法表，并提供了完整的HTML文件结构和样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <style>
        body {
            color: #333;
        }
        table {
            width: 900px;
            table-layout: fixed;
            /*border-collapse: collapse;*/
            empty-cells: hide;
        }
        td {
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>九九乘法表</h1>
    <hr>


    <script>
        //JavaScript生成九九乘法表
        document.write('<table>');

        //循环 输出tr 行
        for (var i = 1; i <= 9; i ++) {
            document.write('<tr>');

            //输出 td 单元格
            for (var j = 1; j <= i; j ++) {
                document.write(`<td>${i}&times;${j} = ${i * j}</td>`);
            }
            
            document.write('</tr>');
        }

        document.write('</table>');

        document.write('<br><br><br>');

        document.write('<table>');

        //循环 输出tr 行
        for (var i = 9; i >= 1; i --) {
            document.write('<tr>');

            //输出 td 单元格
            for (var j = 1; j <= i; j ++) {
                document.write(`<td>${i}&times;${j} = ${i * j}</td>`);
            }
            
            document.write('</tr>');
        }

        document.write('</table>');



        document.write('<br><br><br>');

        document.write('<table>');

        //循环 输出tr 行
        for (var i = 1; i <= 9; i ++) {
            document.write('<tr>');
            //输出空的单元格
            for (var m = 1; m <= (9-i); m ++) {
                document.write('<td></td>');
            }
            //输出 td 单元格
            for (var j = 1; j <= i; j ++) {
                document.write(`<td>${i}&times;${j} = ${i * j}</td>`);
            }
            
            document.write('</tr>');
        }

        document.write('</table>');




        document.write('<br><br><br>');

        document.write('<table>');

        //循环 输出tr 行
        for (var i = 9; i >= 1; i --) {
            document.write('<tr>');
            //输出空的单元格
            for (var m = 1; m <= (9-i); m ++) {
                document.write('<td></td>');
            }
            //输出 td 单元格
            for (var j = 1; j <= i; j ++) {
                document.write(`<td>${i}&times;${j} = ${i * j}</td>`);
            }
            
            document.write('</tr>');
        }

        document.write('</table>');

    </script>


</body>
</html>

转载于:https://www.cnblogs.com/neymargoal/p/9470986.html