JavaScript —— 实现九九乘法表案例

入梦风行

于 2023-04-28 00:38:42 发布

阅读量473

点赞数 1

分类专栏： JavaScript学习文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_62107003/article/details/130417871

版权

JavaScript学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章展示了如何使用HTML和JavaScript代码生成两种形式的乘法表：正三角形和倒三角形。通过嵌套的for循环控制行数和列数，动态生成乘法表达式及其结果，以粉红色边框的span元素展示，具有良好的可读性。

摘要由CSDN通过智能技术生成

正三角乘法表

相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            display: inline-block;
            padding: 5px 10px;
            border: 1px solid pink;
            margin: 2px;
            border-radius: 5px;
            box-shadow: 2px 2px 2px rgba(255, 192, 203, 0.4);
            background-color: rgba(255, 192, 203, 0.1);
        }
    </style>
</head>
<body>
    <script>
        // 外层for循环控制行数
        for(let i=1;i<=9;i++){
            // 内层for循环控制列数
            for(let j=1;j<=i;j++){
                document.write(`<span>${j}*${i}=${j*i}</span>`)
            }
            document.write('<br>')
        }
    </script>
</body>
</html>

运行结果

正三角乘法表

倒三角乘法表

相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            display: inline-block;
            padding: 5px 10px;
            border: 1px solid pink;
            margin: 2px;
            border-radius: 5px;
            box-shadow: 2px 2px 2px rgba(255, 192, 203, 0.4);
            background-color: rgba(255, 192, 203, 0.1);
        }
    </style>
</head>
<body>
    <script>
        // 外层for循环控制行数
        for(let i=9;i>=1;i--){
            // 内层for循环控制列数
            for(let j=1;j<=i;j++){
                document.write(`<span>${j}*${i}=${j*i}</span>`)
            }
            document.write('<br>')
        }
    </script>
</body>
</html>