Javascript实现带关闭按钮的网页漂浮广告代码


以下是一个简单的JavaScript实现,用于在网页上创建一个带有关闭按钮的漂浮广告。请注意,这个示例假设您已经有基本的HTML和CSS知识,并且您的网页允许运行JavaScript。

HTML部分(在您的网页中添加这个容器,用于放置漂浮广告):


<div id="floatingAd" style="position: fixed; bottom: 20px; right: 20px; width: 300px; background-color: yellow; padding: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); display: none;">
    <span id="adContent">这是一个漂浮广告!点击关闭按钮可以关闭它。</span>
    <button onclick="closeFloatingAd()">关闭</button>
</div>

CSS部分(这里直接在HTML元素中通过style属性设置了,但您可以选择在CSS文件中定义):


/* CSS部分已包含在HTML的style属性中 */

JavaScript部分(在您的网页的`

这段代码做了以下几件事:

1. 创建了一个包含广告内容和关闭按钮的`div`元素,并通过CSS样式设置为固定位置,以便它能在页面上漂浮。

2. 定义了两个JavaScript函数:`showFloatingAd`用于显示漂浮广告,`closeFloatingAd`用于关闭漂浮广告。

3. 设置了`window.onload`事件,以便在页面加载完成后立即调用`showFloatingAd`函数,显示漂浮广告。

请注意,这只是一个简单的示例,您可能需要根据自己的具体需求调整HTML、CSS和JavaScript代码。例如,您可能希望调整广告的尺寸、位置、颜色或样式,或者添加更多的功能,如广告点击事件处理、广告展示时间控制等。