首頁 >web前端 >js教程 >使用html css js列印直角圖案

使用html css js列印直角圖案

Patricia Arquette原創: 2024-10-09 20:34:28864瀏覽

Right angle pattern printing using html css js

代碼是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Right-Angled Star Triangle</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #1c1c1c;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            padding: 20px;
        }

        .container {
            text-align: center;
            background-color: #333;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }

        h1 {
            margin-bottom: 20px;
            font-size: 24px;
            color: #f0f0f0;
        }

        label {
            margin-bottom: 10px;
            display: block;
            font-size: 18px;
        }

        #rows {
            padding: 10px;
            border-radius: 5px;
            border: none;
            font-size: 18px;
            width: 60%;
            background-color: #444;
            color: #fff;
            margin-bottom: 20px;
        }

        button {
            padding: 10px 20px;
            font-size: 18px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
            background: linear-gradient(45deg, #ff416c, #ff4b2b);
            color: white;
            box-shadow: 0 0 15px rgba(255, 65, 108, 0.5);
            transition: box-shadow 0.3s ease;
        }

        button:hover {
            box-shadow: 0 0 30px rgba(255, 65, 108, 0.8);
        }

        #pattern {
            margin-top: 20px;
            text-align: right; /* Right-align the triangle */
        }

        .star {
            display: inline-block;
            font-size: 40px; /* Bigger stars */
            margin: 2px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Right-Angled Star Triangle</h1>
        <label for="rows">Enter number of rows:</label>
        <input type="number" id="rows" placeholder="Number of rows">
        <button onclick="generatePattern()">Create Pattern</button>
        <button onclick="clearPattern()">Clear Pattern</button>
        <div id="pattern"></div>
    </div>

    <script>
        // Function to generate a random color in hexadecimal
        function getRandomColor() {
            let letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        // Function to create the triangle pattern
        function generatePattern() {
            let numRows = document.getElementById('rows').value;
            let patternDiv = document.getElementById('pattern');
            patternDiv.innerHTML = '';  // Clear previous pattern

            if (numRows <= 0) {
                alert("Please enter a valid number of rows!");
                return;
            }

            // Loop through rows
            for (let i = 1; i <= numRows; i++) {
                let row = document.createElement('div');

                // Loop through each star in the row
                for (let j = 1; j <= i; j++) {
                    let star = document.createElement('span');
                    star.textContent = '❤️';
                    star.classList.add('star');
                    star.style.color = getRandomColor();  // Set random color to the star
                    row.appendChild(star);
                }

                // Append the row to the pattern div
                patternDiv.appendChild(row);
            }
        }

        // Function to clear the pattern
        function clearPattern() {
            document.getElementById('pattern').innerHTML = '';
            document.getElementById('rows').value = '';
        }
    </script>
</body>
</html>

以上是使用html css js列印直角圖案的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html using JS

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：結合儲存庫和事件驅動模式下一篇：結合儲存庫和事件驅動模式

看更多