【JS学习总结】如何使用JS实现网站首页定时弹出广告栏效果

前言：这个系列主要是对之前学习JavaScript实现的一些小demo的总结，总觉得不能这样学过了就算了，趁着假期就好好总结一下吧。

在平常的开发中，我们常常会遇到这样的一个需求：在网站首页定时弹出一个广告栏，过了一会这个广告又自动消失了。那么，这种效果如何使用JS代码来实现呢？

首先，来分析一下，这个广告其实也就是一个图片，我们可以在HTML标签中绑定一个函数，这个函数主要就是过了一会将原本隐藏的图片显示，过了一定的时间又将该图片隐藏。

所用到的技术分析如下： 
获取图片的位置(document.getElementById(“”)) 

隐藏图片：display：none

定时操作：setInterval(“显示图片的函数”，3000); 

代码书写步骤分析如下：

第一步：在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)

第二步：确定事件(onload)并为其绑定一个函数

第三步：书写这个函数(设置一个显示图片的定时操作)

第四步： 书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)

第五步：清除显示图片的定时操作()

第六步：书写隐藏图片的定时操作

第七步：书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)

第八步：清除隐藏图片的定时操作() 

注意点：

要在body标签中的onload属性绑定对应