基于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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 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
wordpress之wp-settings.php
2007/08/17 PHP
PHPMailer发送邮件
2016/12/28 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
国旗下的讲话演讲稿
2014/05/08 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
关于保护环境的建议书
2014/08/26 职场文书
体育运动会广播稿
2014/10/05 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
导游词之江南周庄
2019/12/06 职场文书