js 创建div悬浮广告

要在 JavaScript 中创建一个 div 悬浮广告，可以按照以下步骤进行：

基础概念：

div 元素是 HTML 中的一个块级元素，常用于布局和分组其他元素。
悬浮广告通常是指在页面上固定位置显示的广告，不随页面滚动而移动。

实现优势：

可以灵活控制广告的位置、大小和样式。
能够在用户浏览页面时持续展示广告，提高曝光率。

类型：

固定在页面顶部或底部。
固定在页面左侧或右侧。

应用场景：

网站需要增加广告收入时。
推广特定的产品或活动。

实现代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    #floatingAd {
      position: fixed;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      width: 150px;
      height: 150px;
      background-color: lightblue;
      border: 1px solid blue;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
  </style>
</head>

<body>
  <h1>页面内容</h1>
  <p>这里是大量的页面内容，用于测试悬浮广告的效果。</p>

  <div id="floatingAd">广告</div>

  <script>
    // 可以在这里添加更多关于悬浮广告的交互逻辑，比如点击跳转等
    const floatingAd = document.getElementById('floatingAd');
    floatingAd.addEventListener('click', () => {
      window.location.href = 'https://example.com/ad-page';
    });
  </script>
</body>

</html>

可能出现的问题及解决方法：