- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
Quelqu'un a-t-il une solution pour changer la couleur d'arrière-plan en HTML lorsque certains boutons sont enfoncés, par exemple la lettre A. Chaque fois que j'appuie sur le bouton, la couleur passe à une autre couleur (du rouge au vert ou du vert au rouge) et reste ainsi. Mais la bonne nouvelle est que cela fonctionne lorsque je ne me concentre pas sur le navigateur Web, donc cela fonctionne également lorsque j'utilise d'autres applications via le navigateur. Désolé pour les questions noob et la barrière de la langue. merci pour votre réponse.
Semblable à ce lien, mais devrait être sur la clé : Comment changer différentes couleurs d'arrière-plan en utilisant un seul bouton
P粉3453027532023-09-08 09:34:22
Vous pouvez utiliser JavaScript pour détecter les événements clés et modifier la couleur d'arrière-plan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Change background color on keypress</title>
</head>
<body>
<p>Press the 'A' key to change the background color!</p>
<script>
var colors = ["red", "green"];
var currentColorIndex = 0;
document.addEventListener("keypress", function(event) {
if (event.key === "a" || event.key === "A") {
var body = document.getElementsByTagName("body")[0];
body.style.backgroundColor = colors[currentColorIndex];
currentColorIndex = (currentColorIndex + 1) % colors.length;
}
});
</script>
</body>
</html>
P粉0154020132023-09-08 00:33:04
Je ne pense pas qu'il soit possible de faire en sorte qu'il s'active lorsque la touche A est enfoncée depuis une autre fenêtre, car sur la plupart des systèmes d'exploitation, le clavier se concentre automatiquement sur la fenêtre ciblée. Il existe probablement une application pour cela, mais elle est vraiment peu pratique à utiliser (si vous essayez d'appuyer sur la touche A dans l'application, cela vous amène à la fenêtre).
Mais si vous trouvez un moyen, voici votre réponse. Pour référence, je suppose que l'arrière-plan de votre site est déjà rouge.
let isRed = true;
document.addEventListener('keydown', (event) => {
if (event.key === 'a') {
if (isRed) {
document.body.style.backgroundColor = 'green';
isRed = false;
} else {
document.body.style.backgroundColor = 'red';
isRed = true;
}
}
});