JavaScript练习1-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_74432453/article/details/138254037

阶梯状99乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阶梯状99乘法表</title>
    <style>
        td {
            padding: 5px;
            text-align: left;
        }
    </style>
</head>
<body>
    <script>
        let tableContent = '';
        for (let i = 1; i <= 9; i++) {
            tableContent += '<tr>';
            for (let j = 1; j <= i; j++) {
                tableContent += `<td>${j} * ${i} = ${i * j}</td>`;
            }
            tableContent += '</tr>';
        }
        document.querySelector('table tbody').innerHTML = tableContent;
    </script>
</body>
</html>

动态生成菱形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态生成菱形</title>
    <style>
        #diamond {
            white-space: pre;
            font-family: monospace;
        }
        input[type="number"] {
            width: 50px;
        }
    </style>
</head>
<body>
    <label for="rows">输入行数:</label>
    <input type="number" id="rows" min="1" />
    <button onclick="generateDiamond()">生成菱形</button>
    <pre id="diamond"></pre>

    <script>
        function generateDiamond() {
            const n = parseInt(document.getElementById('rows').value, 10);
            let diamond = '';

            for (let i = 0; i < n; i++) {
                diamond += ' '.repeat(n - i - 1) + '*'.repeat(i * 2 + 1) + '\n';
            }
           
            for (let i = n - 2; i >= 0; i--) {
                diamond += ' '.repeat(n - i - 1) + '*'.repeat(i * 2 + 1) + '\n';
            }

           
            document.getElementById('diamond').textContent = diamond;
        }
    </script>
</body>
</html>

生成等腰三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生成等腰三角形</title>
    <style>
        #triangle {
            white-space: pre;
            font-family: monospace;
            line-height: 1;
        }
        input[type="number"] {
            width: 50px;
        }
    </style>
</head>
<body>
    <label for="height">输入高度:</label>
    <input type="number" id="height" min="1" />
    <button onclick="generateTriangle()">生成三角形</button>
    <pre id="triangle"></pre>

    <script>
        function generateTriangle() {
            const height = parseInt(document.getElementById('height').value, 10);
            let triangle = '';

            for (let i = 0; i < height; i++) 
            {
                triangle += ' '.repeat(height - i - 1);
                triangle += '*'.repeat(i * 2 + 1);
                triangle += '\n';
            }
            document.getElementById('triangle').textContent = triangle;
        }
    </script>
</body>
</html>

生成直角三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生成直角三角形</title>
    <style>
        #triangle {
            white-space: pre;
            font-family: monospace;
            line-height: 1;
        }
        input[type="number"] {
            width: 50px;
        }
    </style>
</head>
<body>
    <label for="size">输入大小:</label>
    <input type="number" id="size" min="1" />
    <button onclick="generateRightTriangle()">生成三角形</button>
    <pre id="triangle"></pre>

    <script>
        function generateRightTriangle() {
            const size = parseInt(document.getElementById('size').value, 10);
            let triangle = '';

            for (let i = 1; i <= size; i++) 
            {
                triangle += '*'.repeat(i);
                triangle += '\n';
            }

            document.getElementById('triangle').textContent = triangle;
        }
    </script>
</body>
</html>