基于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简介_动力节点Java学院整理
Jul 04 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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实现图片旋转效果实例代码
2014/10/01 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
小程序实现悬浮搜索框
2019/07/12 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python中的日期时间处理详解
2016/11/17 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
简单了解django orm中介模型
2019/07/30 Python
python实现车牌识别的示例代码
2019/08/05 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
Python基于template实现字符串替换
2020/11/27 Python
selenium如何定位span元素的实现
2021/01/13 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
水污染治理专业毕业生推荐信
2013/11/14 职场文书
自我鉴定四大框架
2014/01/17 职场文书
参观考察邀请函范文
2014/01/29 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
新教师岗前培训方案
2014/06/05 职场文书
六一亲子活动总结
2014/07/01 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
CSS 一行代码实现头像与国旗的融合
2021/10/24 HTML / CSS