A basic traffic light system can be designed using HTML and CSS for the visual representation, and JavaScript for the dynamic light changes.
CODE
HTML Structure:
The HTML provides the structure of the traffic light. A container div holds three individual div elements, each representing a light.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traffic Light</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="traffic-light-container">
<div class="light red" id="redLight"></div>
<div class="light yellow" id="yellowLight"></div>
<div class="light green" id="greenLight"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Styling:
The CSS styles the appearance of the traffic light and its individual lights.
CODE
/* style.css */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: sans-serif;
}
.traffic-light-container {
background-color: #333;
border-radius: 15px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 15px;
}
.light {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #555; /* Off state color */
border: 2px solid #222;
transition: background-color 0.3s ease;
}
.light.red.active {
background-color: red;
box-shadow: 0 0 20px red;
}
.light.yellow.active {
background-color: yellow;
box-shadow: 0 0 20px yellow;
}
.light.green.active {
background-color: green;
box-shadow: 0 0 20px green;
}
JavaScript Functionality:
The JavaScript handles the logic for changing the active light and simulating the traffic light sequence.
JavaScript
// script.js
const redLight = document.getElementById('redLight');
const yellowLight = document.getElementById('yellowLight');
const greenLight = document.getElementById('greenLight');
const lights = [redLight, yellowLight, greenLight];
let currentIndex = 0;
function turnOffAllLights() {
lights.forEach(light => light.classList.remove('active'));
}
function activateLight(index) {
turnOffAllLights();
lights[index].classList.add('active');
}
function startTrafficLightSequence() {
activateLight(currentIndex);
setInterval(() => {
currentIndex = (currentIndex + 1) % lights.length;
activateLight(currentIndex);
}, 2000); // Change light every 2 seconds
}
startTrafficLightSequence();
---
UN SYSTÈME DE FEUX DE ROUTE BASIQUE PEUT ÊTRE CONÇU EN UTILISANT HTML ET CSS POUR LA REPRÉSENTATION VISUELLE, ET JAVASCRIPT POUR LES CHANGEMENTS DYNAMIQUES DE LUMIÈRE.
Un système de feux tricolores basique peut être conçu en utilisant HTML et CSS pour l'affichage, et JavaScript pour la gestion dynamique des changements de couleur.
CODE
Structure HTML :
Le code HTML définit la structure du feu tricolore. Un élément conteneur `div` regroupe trois éléments `div` individuels, chacun représentant un feu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feu Tricolore</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="traffic-light-container">
<div class="light red" id="redLight"></div>
<div class="light yellow" id="yellowLight"></div>
<div class="light green" id="greenLight"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Style CSS :
Le style CSS définit l’apparence du feu de circulation et de ses voyants individuels.
CODE
/* style.css */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: sans-serif;
}
.traffic-light-container {
background-color: #333;
border-radius: 15px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 15px;
}
.light {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #555; /* Couleur d'arrêt */
border: 2px solid #222;
transition: background-color 0.3s ease;
}
.light.red.active {
background-color: red;
box-shadow: 0 0 20px red;
}
.light.yellow.active {
background-color: yellow;
box-shadow: 0 0 20px yellow;
}
.light.green.active {
background-color: green;
box-shadow: 0 0 20px green;
}
Fonctionnalités JavaScript :
Le code JavaScript gère la logique de changement de la lumière active et la simulation de la séquence des feux de circulation.
JavaScript
// script.js
const rougeFeu = document.getElementById('rougeFeu');
const jauneFeu = document.getElementById('jauneFeu');
const vertFeu = document.getElementById('vertFeu');
const lumières = [rougeFeu, jauneFeu, vertFeu];
let indexActuel = 0;
function éteindreToutesLesFeux() {
lumières.forEach(lumière => lumière.classList.remove('active'));
}
function activerFeu(index) {
allumerToutesLesFeux();
lumières[index].classList.add('active');
}
function démarrerSéquenceFeuxDeTrafic() {
activerFeu(indexActuel);
setInterval(() => {
indexActuel = (indexActuel + 1) % lumières.length;
activerFeu(indexActuel);
}, 2000); // Changer le feu toutes les 2 secondes
}
startTrafficLightSequence();
.jpeg)
No comments:
Post a Comment