JQuery如何實現(xiàn)頁面定時彈出廣告

發(fā)布時間：2020-07-28 13:46:01 來源：億速云閱讀：174 作者：小豬欄目：web開發(fā)

這篇文章主要講解了JQuery如何實現(xiàn)頁面定時彈出廣告，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

Js相關(guān)技術(shù)

定時器:

setInterval & clearInterval
setTimeout & clearTimeout

顯示: img.style.display = "block"

隱藏: img.style.display = "none"

img 對象

style屬性: style對象

需求分析

當(dāng)用戶打開界面，3秒鐘之后彈出廣告，這個廣告顯示5秒鐘，隱藏廣告

技術(shù)分析

定時器: setTimeout

顯示和隱藏: style.display = "block/none"

步驟分析：

導(dǎo)入JQ的文件
編寫JQ的文檔加載事件
啟動定時器 setTimeout("",3000);
編寫顯示廣告的函數(shù)
在顯示廣告里面再啟動一個定時器
編寫隱藏廣告的函數(shù)

代碼實現(xiàn)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<!--
			1. 導(dǎo)入JQ的文件
			2. 編寫JQ的文檔加載事件
			3. 啟動定時器 setTimeout("",3000);
			4. 編寫顯示廣告的函數(shù)
			5. 在顯示廣告里面再啟動一個定時器
			6. 編寫隱藏廣告的函數(shù)
		-->
		<script>
			//顯示廣告
			function showAd(){
				$("#img1").slideDown(2000);
				setTimeout("hideAd()",3000);
			}
			
			//隱藏廣告
			function hideAd(){
				$("#img1").slideUp(2000);
			}
			
			
			$(function(){
				setTimeout("showAd()",3000);
				
			});
		</script>
	</head>
	<body>
		<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" id="img1" width="100%"  />
	</body>
</html>

看完上述內(nèi)容，是不是對JQuery如何實現(xiàn)頁面定時彈出廣告有進一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

JQuery如何實現(xiàn)頁面定時彈出廣告

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽