网站页首可关闭广告条源码

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-29 09:57:04

　　网站页首可关闭广告条源码

HTML结构

HTML

<div class="ad-banner">
  <span>这是一条广告</span>
  <button class="close-btn">关闭</button>
</div>

CSS样式

CSS

.ad-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 10px;
  z-index: 999;
}

.close-btn {
  float: right;
  cursor: pointer;
}

JavaScript代码

JavaScript

const closeBtn = document.querySelector('.close-btn');
const adBanner = document.querySelector('.ad-banner');

closeBtn.addEventListener('click', () => {
  adBanner.style.display = 'none';
  // 可选：将关闭状态保存到本地存储，下次访问不再显示
  localStorage.setItem('adClosed', 'true');
});

// 检查本地存储，如果已关闭，则隐藏广告条
if (localStorage.getItem('adClosed') === 'true') {
  adBanner.style.display = 'none';
}

代码解释

HTML结构: 创建一个带有ad-banner类的div作为广告条容器，并在其中放置广告内容和关闭按钮。
CSS样式: 将广告条固定在页面顶部，设置背景颜色、填充等样式。
JavaScript代码:
- 获取关闭按钮和广告条元素。
- 添加点击事件，点击关闭按钮时将广告条的display属性设置为none，实现隐藏效果。
- 可选地，将关闭状态保存到本地存储，下次用户访问时，如果已经关闭过，则不再显示广告条。

优化与扩展

动画效果: 可以使用CSS3的transition或animation属性为广告条的显示和隐藏添加动画效果。
cookie存储: 除了localStorage，还可以使用cookie来保存关闭状态。
用户体验: 可以增加一些交互效果，比如鼠标悬停时改变按钮样式。
广告内容动态获取: 可以通过Ajax从服务器获取广告内容，实现动态更新。
广告位管理: 可以设置多个广告位，并通过JavaScript随机显示。

示例

HTML

<!DOCTYPE html>
<html>
<head>
  <title>可关闭广告条</title>
  <style>
    /* CSS样式 */
  </style>
</head>
<body>
  <div class="ad-banner">
    <span>这是一条广告</span>
    <button class="close-btn">关闭</button>
  </div>
  <script>
    // JavaScript代码
  </script>
</body>
</html>