第一步：編寫一個簡潔廣告框
代碼：
<div id="alert">
<span id="delete">X</span>
<br />
<h1>一條廣告</h1>
<p>
getElementById("id值") 返回對擁有指定 id 的第一個對象的引用。
getElementsByName("name屬性值") 返回帶有指定名稱的對象集合
</p>
</div>
首先做一個手動關閉並且只彈出一次的效果，利用SetTimeout控制彈出的時間，效果爲網頁加載完畢後，廣告五秒之後彈出，然後需要手動關閉而且關閉之後不會在顯示第二次，代碼如下：
然後利用SetInterval 可以設置手動關閉後再次彈出。（如圖爲兩秒後再次彈出）
設置自動彈出然後自動關閉
如果讓彈出框重複的自動彈出和自動關閉，只需要把//window.clearInterval(time);註釋即可不斷地執行。
相關代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
}
#alert{
width: 200px;
height: 200px;
border: black solid 1px;
display: none;
right: 0;
bottom: 0;
position: fixed;
}
#delete{
padding-right: 5px;
padding-top: 2px;
float: right;
font-size: 20px;
cursor: pointer;
}
img{
width: 200px;
height: 150px;
}
</style>
<script>
window.onload = function(){
var dele = document.getElementById("delete");
var ale = document.getElementById("alert");
dele.onclick = function(){
ale.style.display = "none";
}
var time;
time = window.setInterval(show,2000);
function show(){
ale.style.display = "block";
window.clearInterval(time);
time = window.setInterval(hide,5000)
}
function hide(){
ale.style.display = "none";
window.clearInterval(time);
}
}
</script>
</head>
<body>
<div id="alert">
<span id="delete">X</span>
<br />
<h1>一條廣告</h1>
<i class="img"> <a href="http://ww.baidu.com"><img src="img/1.jpg"/></a></i>
</div>
</body>
</html>