Adakah sesiapa mempunyai penyelesaian tentang cara menukar warna latar belakang dalam HTML apabila butang tertentu ditekan, contohnya huruf A. Setiap kali saya menekan butang, warna bertukar kepada warna lain (merah kepada hijau, atau hijau kepada merah) dan kekal seperti itu. Tetapi perkara yang baik ialah ia berfungsi apabila saya tidak fokus pada penyemak imbas web, jadi ia juga berfungsi apabila saya menggunakan apl lain melalui penyemak imbas. Maaf atas soalan noob dan halangan bahasa. Terima kasih atas maklumbalas kamu.
Serupa dengan pautan ini, tetapi harus dikunci: Bagaimana untuk menukar warna latar belakang yang berbeza menggunakan hanya satu butang
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda boleh menggunakan JavaScript untuk mengesan peristiwa penting dan menukar warna latar belakang
<!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>Saya tidak fikir ia mungkin untuk menjadikannya aktif apabila kekunci A ditekan dari tetingkap lain, kerana pada kebanyakan sistem pengendalian papan kekunci secara automatik memfokus kepada tetingkap fokus. Mungkin terdapat aplikasi untuknya, tetapi ia benar-benar menyusahkan untuk digunakan (jika anda cuba menekan kekunci A dalam apl, ia membawa anda ke tetingkap).
Tetapi jika anda mencari jalan, ini jawapan anda. Sebagai rujukan, saya mengandaikan latar belakang tapak anda sudah berwarna merah.
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; } } });