suchen

Heim >Web-Frontend >js-Tutorial >Rechtwinkliger Musterdruck mit HTML, CSS, JS

Rechtwinkliger Musterdruck mit HTML, CSS, JS

Patricia Arquette
Patricia ArquetteOriginal
2024-10-09 20:34:28864Durchsuche

Right angle pattern printing using html css js

CODE IST: 

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

Das obige ist der detaillierte Inhalt vonRechtwinkliger Musterdruck mit HTML, CSS, JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html using JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Kombination von Repository- und ereignisgesteuerten MusternNächster Artikel：Kombination von Repository- und ereignisgesteuerten Mustern

In Verbindung stehende Artikel

Mehr sehen