编码挑战：JavaScript 利用键盘改变div背景颜色

最新推荐文章于 2022-07-27 16:28:39 发布

kllo__

最新推荐文章于 2022-07-27 16:28:39 发布

阅读量496

点赞数

分类专栏： javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/kllo__/article/details/122943218

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用JavaScript监听键盘事件，根据用户按下R、Y、G、B键动态改变HTML页面中多个div元素的背景颜色。提供的解决方案包括检查按键并转换为大写，以处理大小写的输入差异，并遍历所有div元素设置相应颜色。

摘要由CSDN通过智能技术生成

问题描述

编写相关 JavaScript 代码， div 根据用户按下的键（R-red,Y-yellow,G-green,B-blue）改变相应的背景颜色。

给定的 HTML 代码：

<html>
 <head>
 </head>
 <body>
	<p>Press the R (red), Y (yellow), G (green) or B (blue) key to change paragraph colors accordingly.</p>

	<h1>Paragraph 1</h1>
	<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim fringilla dapibus. Curabitur placerat efficitur molestie. Quisque quis consequat nibh. Aenean feugiat, eros eget aliquam vulputate, leo augue luctus lectus, non lobortis libero quam non sem. Aliquam sit amet tincidunt ex, mollis interdum massa.</div>

	<h1>Paragraph 2</h1>
	<div>Vivamus at justo blandit, ornare leo id, vehicula urna. Fusce sed felis eget magna viverra feugiat eget nec orci. Duis non massa nibh. Aenean vehicula velit a magna lobortis tempor ut quis felis. Proin vitae dui a eros facilisis fringilla ut ut ante.</div>

	<h1>Paragraph 3</h1>
	<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet pharetra massa. Nulla blandit erat nulla, et scelerisque libero varius ut. Praesent bibendum eu magna ullamcorper venenatis. Sed ut pellentesque leo. Sed ultrices sapien consequat odio posuere gravida.</div> </body>
</html>

解决方法

我的方法：

//Write-Your-Code-Here
const divElements = Array.from(document.getElementsByTagName("div"));
document.addEventListener("keypress",e=>{
    let keycode=String.fromCharCode(e.charCode) ;
    let color=" ";
    switch(keycode)
    {
        case "r":
      
        color="red";
        break;
        case "y":
      
        color="yellow";
        break;
        case "g":
      
        color="green";
        break;
        case "b":
        
        color="blue";
        break;
        default:
        
        break;
    }
    divElements.forEach(divElement=>{
      divElement.style.backgroundColor=color;
    })
});

参考答案：

document.addEventListener("keydown", e => {
  let key = e.key; // Get the pressed key
  key = key.toUpperCase(); // To handle both upper and lowercase keys
  let color = "";
  switch (key) {
    case "R":
      color = "red";
      break;
    case "Y":
      color = "yellow";
      break;
    case "G":
      color = "green";
      break;
    case "B":
      color = "blue";
      break;
    default:
      console.log(`The ${key} key is not handled`);
  }
  // Changing colors for all <div> elements
  const divElements = Array.from(document.getElementsByTagName("div"));
  divElements.forEach(divElement => {
    divElement.style.backgroundColor = color;
  });
});