집 > 기사 > 웹 프론트엔드 > html css js를 사용한 직각 패턴 인쇄

html css js를 사용한 직각 패턴 인쇄

Patricia Arquette원래의: 2024-10-09 20:34:28833검색

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

성명：

이전 기사：리포지토리와 이벤트 기반 패턴 결합다음 기사：리포지토리와 이벤트 기반 패턴 결합