zoukankan html css js c++ java

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

需求：九九乘法表

<!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>

查看全文

相关阅读:
javascript和C#比较
 前端模块管理器简介
 javascript中的splice方法介绍&示例
 javascript中数组揭秘
 17款code review工具
 IIS ip访问限制插件
 iis 限制动态IP地址访问次数
 AWS云使用100条宝贵经验分享
 C# 开源框架(整理)
如何获取Azure AD tenant的tenant Id?

原文地址：https://www.cnblogs.com/neymargoal/p/9470986.html