js发光代码

JavaScript 中实现发光效果通常是通过 CSS 和 JavaScript 结合的方式，使用 CSS 的 box-shadow 属性来创建发光效果，然后通过 JavaScript 来动态改变这些属性。下面是一个简单的例子：

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发光效果</title>
<style>
  .glow {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    border-radius: 50%;
    transition: box-shadow 0.3s ease;
  }
</style>
</head>
<body>

<div class="glow" id="glowElement"></div>

<script src="script.js"></script>
</body>
</html>

JavaScript 代码（script.js）

document.addEventListener('DOMContentLoaded', function() {
  const glowElement = document.getElementById('glowElement');

  glowElement.addEventListener('mouseover', function() {
    this.style.boxShadow = '0 0 20px #3498db, 0 0 30px #3498db, 0 0 40px #3498db';
  });

  glowElement.addEventListener('mouseout', function() {
    this.style.boxShadow = '';
  });
});

解释

HTML 结构：创建一个 div 元素，用于展示发光效果。
CSS 样式：定义了一个 .glow 类，设置了元素的基本样式，并且有一个过渡效果，使得发光效果更加平滑。
JavaScript 代码：当鼠标悬停在元素上时，通过修改 box-shadow 属性来增加发光效果；当鼠标移开时，移除发光效果。

优势

视觉吸引力：发光效果可以吸引用户的注意力，增强用户体验。
交互性：结合 JavaScript 可以实现动态的交互效果，提升网站的互动性。

应用场景

按钮美化：使按钮在用户交互时更加醒目。
图标强调：对重要的图标进行发光处理，以突出显示。
页面元素聚焦：在复杂的页面布局中，通过发光效果引导用户注意力。

可能遇到的问题及解决方法

性能问题：频繁修改样式可能导致页面重绘和回流，影响性能。可以通过使用 requestAnimationFrame 来优化动画效果。
兼容性问题：不同浏览器对 CSS 属性的支持可能有所不同。可以通过添加浏览器前缀或使用 polyfill 来解决。

示例代码优化

为了提高性能，可以使用 requestAnimationFrame 来平滑动画效果：

glowElement.addEventListener('mouseover', function() {
  let intensity = 0;
  const glow = () => {
    intensity += 1;
    this.style.boxShadow = `0 0 ${intensity * 5}px #3498db`;
    if (intensity < 20) {
      requestAnimationFrame(glow);
    }
  };
  glow();
});

glowElement.addEventListener('mouseout', function() {
  this.style.boxShadow = '';
});

这样，发光效果会更加平滑且性能更好。