基于JQuery实现页面定时弹出广告


Posted in jQuery onMay 08, 2020

Js相关技术

定时器:

​ setInterval & clearInterval
​ setTimeout & clearTimeout

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

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

img 对象

style属性: style对象

需求分析

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

技术分析

定时器: setTimeout

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

步骤分析:

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

代码实现

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
JQuery复选框全选效果如何实现
May 08 #jQuery
JQuery省市联动效果实现过程详解
May 08 #jQuery
jquery实现手风琴案例
May 04 #jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 #jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 #jQuery
jQuery实现的上拉刷新功能组件示例
May 01 #jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 #jQuery
You might like
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
PHP内置加密函数详解
2016/11/20 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
原生js轮播特效
2017/05/18 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
详解10分钟学会vue滚动行为
2017/09/21 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
node.js基础知识汇总
2020/08/25 Javascript
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
Python中常见的异常总结
2018/02/20 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
Python高级property属性用法实例分析
2019/11/19 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
表彰大会策划方案
2014/05/13 职场文书
王力宏牛津大学演讲稿
2014/05/22 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
Python字典和列表性能之间的比较
2021/06/07 Python