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