基于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图片放大镜效果
Jun 23 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery实现简单日历效果
Jul 05 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
新手学习PHP的一些基础知识分享
2011/07/27 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
php汉字转拼音的示例
2014/02/27 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
潜说js对象和数组
2011/05/25 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
Python实现决策树C4.5算法的示例
2018/05/30 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
C++:局部变量能否和全局变量重名
2014/03/03 面试题
初中科学教学反思
2014/01/21 职场文书
酒店节能减排方案
2014/05/26 职场文书
区域经理岗位职责
2015/02/02 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
高考升学宴主持词
2019/06/21 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
golang实现浏览器导出excel文件功能
2022/03/25 Golang