使用jquery完成页面定时弹出广告(代码片段)

zllk zllk     2023-03-19     649

关键词:

使用JQuery完成页面定时弹出广告

Js相关技术

定时器:
? setInterval & clearInterval
? setTimeout & clearTimeout

显示: img.style.display = "block"
隐藏: img.style.display = "none"

img 对象
? style属性: style对象

需求分析

当用户打开界面,3秒钟之后弹出广告,这个广告显示5秒钟,隐藏广告

技术分析

定时器: setTimeout
显示和隐藏: style.display = "block/none"

步骤分析:

  1. 导入JQ的文件
  2. 编写JQ的文档加载事件
  3. 启动定时器 setTimeout("",3000);
  4. 编写显示广告的函数
  5. 在显示广告里面再启动一个定时器
  6. 编写隐藏广告的函数

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<!--
			1. 导入JQ的文件
			2. 编写JQ的文档加载事件
			3.  启动定时器 setTimeout("",3000);
			4. 编写显示广告的函数
			5. 在显示广告里面再启动一个定时器
			6. 编写隐藏广告的函数
		-->
		<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%" style="display:none"  />
	</body>
</html>

定时弹出广告(代码片段)

...clearInterval(id):    clearTimeout(id):步骤分析:  1.html页面,先把广告隐藏  2.页面加载成功事件onload  3.编写函数    定时器<html>& 查看详情

jquery_案例1_广告显示和隐藏与jquery_案例2_抽奖_演示(代码片段)

...后。自动显示广告2.广告显示5秒后,自动消失。分析:1.使用定时器来完成。setTimeout(执行一次定时器)2.分析发现JQuery的显示和隐藏动画效果其实就是控制display3.使用show/hide方法来完成广告的显示*///入口函数,在页面加载完成之... 查看详情

jquery

1.1 使用JQuery完成页面的弹出广告的效果:1.1.1 需求:在网站的首页上定时弹出一个广告,过几秒之后,广告会自动消失。 1.1.2 分析:1.1.2.1 技术分析:【JQuery的概述】什么JQuery: JQuery的版本:JQuery1.x &... 查看详情

jquery选择器

###今日任务####使用JQuery完成页面定时弹出广告定时器:?setIntervalclearInterval?setTimeoutclearTimeout显示:img.style.display="block"隐藏:img.style.display="none"img对象?style属性:style对象####使用JQuery完成表格的隔行换色获得所有的行?table.rows[]修改行 查看详情

javaweb04-html篇笔记

1.1使用JQuery完成定时弹出广告:1.1.1需求:之前使用的JS的方式完成定时弹出广告,现在使用JQuery完成同样的效果:1.1.2分析1.1.2.1技术分析:【JQuery的概述】?什么是JQuery:JQuery是一个JS的框架(JS的类库).对传统的JS进行了封装.现在... 查看详情

定时弹出广告(图片)(代码片段)

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><linkrel="stylesheet"type="text/css"href="21.css"/><style>#fatherwidth:1300px;height:2170px;margin:auto;#logowidth:1300px;height:50px;.topwidth:431px;height:50px;float:left;#toppadding-top:1... 查看详情

jquery弹出提示框定时自动消失

运行效果:用div而非setTimeout(),在页面中央显示提示,1.5秒后消失,不影响页面的正常布局。1.HTML代码HTML代码显示提示内容,放在页面中任何位置。<divclass="alert"></div>实际运行中其它居中参考<divclass="alert"style="height:5... 查看详情

8.右下角的弹出广告(代码片段)

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><scriptsrc="jquery-3.3.1.js"></script><style>*margin:0;padding:0;#adposi 查看详情

js实现弹性漂浮广告代码(代码片段)

...时器控制移动)2.div初始样式设置2.获取div可以移动的页面大小3.定时器控制移动,鼠标移入事件停止移动,鼠标移出继续移动。4.点击事件点击让div消失5.实现悬浮广告的完整代码弹性悬浮广告效果图1.功能(鼠标... 查看详情

用jquery实现当页面加载时定时弹出警告框,怎么实现啊?

参考技术A$(document).ready(function()setTimeout(function()alert("严重的警告你,这是页面加载结束后2秒钟时弹出的!");,2000);); 查看详情

05_jquery

fadsf案例一:使用JQ完成首页定时弹出广告图片01_JQ入门01_jQuery入门.html <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>jQuery入门</title> <scripttype="text/javascript"s 查看详情

完成页面的定时跳转

1使用js完成页面的定时跳转<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scripttype="text/javascript"src="js/jquery-2.1.0.js"></script><scripttyp 查看详情

vue使用定时器定时刷新页面(代码片段)

...示。2.逻辑分析如果需要数据实时更新,我们自然是需要使用定时器,不断的调用接口数据,会相对的消耗内存。3.代码示例data()returnintervalId:null,methods://定时刷新数据函数dataRefreh()//计时器正在进行中,退出函数if(this.intervalId!=nu... 查看详情

斗鱼扩展--移除广告优化页面(代码片段)

代码可以在https://pan.baidu.com/s/1uN120-18hvAzELpJCQfbXA 处下载 下面来移除广告元素,在js目录下,创建一个removeAds.js,用来移除网页中的广告元素修改manifest.json 1"content_scripts":[2"js":[3"js/BaseJs/jquery.min.js",4"js/BaseJs 查看详情

使用cefsharp跳转页面不弹出页面:(代码片段)

usingCefSharp;usingCefSharp.Wpf;namespaceCommon.ControlinternalclassCefSharpOpenPageSelf:ILifeSpanHandlerpublicboolDoClose(IWebBrowserbrowserControl,IBrowserbrowser)returnfalse;publicvoidOnAfterCr 查看详情

jq——图片弹出效果(定时弹出图片)toggle(代码片段)

1、使用hide()和show()方法来隐藏和显示HTML元素(这里是img)<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>定时弹出图片——图片弹出的效果</title><scripttype="text/javascript"src="../js/jquery-1.8.3.js"></scri... 查看详情

jquery和dom页面加载完成时触发的事件(代码片段)

1<!DOCTYPEhtml>2<html>3<head>4<metacharset="UTF-8">5<title>Inserttitlehere</title>6<scripttype="text/javascript"src="js/jquery-1.8.3.js"></script>7<s 查看详情

前端开发:jquery(代码片段)

JQueryDOM文档加载的步骤:  1. 解析HTML结构;  2. 加载外部脚本和样式;  3. 解析并执行脚本代码;  4. DOM树构建完成;  5. 加载图片等外部文件;  6. 页面加载完成;JS和JQuery的区别:1.执行... 查看详情