关键词:
使用JQuery完成页面定时弹出广告
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>
定时弹出广告(代码片段)
...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.执行... 查看详情