1 打开网页自动弹出广告效果

【需求】：

1）当页面加载完，3秒后自动显示广告；
2）广告显示5秒后，自动消失；

【分析】：

1）使用定时器setTimeout (执行一次定时器) ；
2）其实JQuery的显示和隐藏动画效果就是控制display；
3）使用 show/hide方法来完成广告的显示；

【代码实现】：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>广告的自动显示与隐藏</title><style>#content{width:100%;height:500px;background:#999}</style><!--引入jquery--><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script>//入口函数，在页面加载完成之后，定义定时器，调用这两个方法$(function () {setTimeout(adShow,3000);setTimeout(adHide,8000);})function adShow() {$("#ad").show("slow");}function adHide() {$("#ad").hide("slow");}</script>
</head>
<body>
<!-- 整体的DIV -->
<div><!-- 广告DIV --><div id="ad" style="display: none;"><img style="width:100%" src="../img/adv.jpg" /></div><!-- 下方正文部分 --><div id="content">正文部分</div>
</div>
</body>
</html>

2 抽奖效果实现

【需求】：

1）点击开始按钮，小相框中滚动图片；
2）点击停止按钮，小相框停止滚动，大相框中显示选中的图片；

【分析】：

1）给开始按钮绑定单击事件：定义循环定时器、切换小相框的src属性（定义数组，存放图片资源路径、生成随机数作为数组索引）；
2）给结束按钮绑定单击事件：停止定时器、给大相框设置src属性；

【代码实现】：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>jquery案例之抽奖</title><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script language='javascript' type='text/javascript'>var imgs = ["../img/man00.jpg","../img/man01.jpg","../img/man02.jpg","../img/man03.jpg","../img/man04.jpg","../img/man05.jpg","../img/man06.jpg",];var startId;//开始定时器的idvar index;//随机角标$(function () {//处理按钮是否可以使用的效果$("#startID").prop("disabled",false);$("#stopID").prop("disabled",true);//1. 给开始按钮绑定单击事件$("#startID").click(function () {// 1.1 定义循环定时器 20毫秒执行一次startId = setInterval(function () {//处理按钮是否可以使用的效果$("#startID").prop("disabled",true);$("#stopID").prop("disabled",false);//1.2生成随机角标 0-6index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999//1.3设置小相框的src属性$("#img1ID").prop("src",imgs[index]);},20);});//2. 给结束按钮绑定单击事件$("#stopID").click(function () {//处理按钮是否可以使用的效果$("#startID").prop("disabled",false);$("#stopID").prop("disabled",true);// 1.1 停止定时器clearInterval(startId);// 1.2 给大相框设置src属性$("#img2ID").prop("src",imgs[index]).hide();//显示1秒之后$("#img2ID").show(1000);});});</script></head>
<body><!-- 小像框 --><div style="border-style:dotted;width:160px;height:100px"><img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/></div><!-- 大像框 --><div style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px"><img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/></div><!-- 开始按钮 --><input id="startID" type="button" value="点击开始" style="width:150px;height:150px;font-size:22px"><!-- 停止按钮 --><input id="stopID" type="button" value="点击停止" style="width:150px;height:150px;font-size:22px">
</body>
</html>

作于202008122225，已归档

———————————————————————————————————

本文为博主原创文章，转载请注明出处！

若本文对您有帮助，轻抬您发财的小手，关注/评论/点赞/收藏，就是对我最大的支持！

祝君升职加薪，鹏程万里！

JavaWeb——JQuery之高级案例实战（打开网页自动弹出广告效果、抽奖效果实现）相关推荐

打开网页自动弹出QQ对话框的实现办法
Ian今天偶然进入一个公司的企业网站,然后QQ聊天窗口这里马上就弹出与那个公司客服聊天的窗口.怀着好奇的心态,Ian分析了该公司的网站源码,发现了实现网页弹出qq对话框的原理与实现方法,相信此时此刻你 ...
打开网页自动下载php,打开网页自动弹出下载aidclient.php窗口解决方法
在使用浏览器打开网页的时刻,有时会自动弹出aidclient.php的下载窗口或者是aidclient.js的下载窗口,下载地址是w.cnzz.com/aidclient.php,不管是360浏览器. ...
jquery.cookie.js 每天首次打开页面时弹出广告
①去jquery官网下载 jquery库文件以及 jquery.cookie.js: ②引入:<script type="text/javascript" src=&q ...
php 弹出下载框,打开网页自动弹出下载！！
建议你下载恶意软件和木马强杀工具windows清理助手查杀恶意软件和木马: 下载网址: 下载安装后,首先升级到最新版本,然后退出正常模式并重启按F8进入到安全模式.打开软件,点击"系统扫描& ...
javaweb mooc在线系统案例实战-张晨光-专题视频课程
javaweb mooc在线系统案例实战-170人已学习课程介绍讲解在线mooc系统的开发,从需求分析到类图设计,数据库设计,架构设计,代码编写等等. 课程收益掌握jav ...
计算机安全弹窗,win10系统打开网页老是弹出安全警告的方法
win10系统使用久了,好多网友反馈说win10系统打开网页老是弹出安全警告的问题,非常不方便.有什么办法可以永久解决win10系统打开网页老是弹出安全警告的问题,面对win10系统打开网页老是弹出安 ...
win7怎么选择java打开网页_大神研习win7系统打开网页会弹出“应用程序已被JAVA安全阻止”的修复技巧...
win7系统有很多人都喜欢使用,我们操作的过程中常常会碰到对win7系统打开网页会弹出"应用程序已被JAVA安全阻止进行设置的解决思路却鲜为人知,小编前几天就遇到了打开网页会弹出" ...
打开网页被Java拦截怎么办_win7系统打开网页会弹出“应用程序已被JAVA安全阻止”的解决方法...
很多小伙伴都遇到过win7系统打开网页会弹出"应用程序已被JAVA安全阻止的困惑吧,一些朋友看过网上零散的win7系统打开网页会弹出"应用程序已被JAVA安全阻止的处理方法,并没有 ...
关于网页右下角总出广告解决办法
不知道在呢么回事打开网站右下角总出广告, 任意个应用涉及网页的都出这种情况, 如360安全卫士的抽奖界面. 查找方法无果考虑到可能是运营商的,果断换dns 使用360的dns优选本地最优也没用本地 ...
html进网页自动弹出窗口,如何阻止网页中自动弹出的广告窗口?
首先我们来介绍一下通用的方法: 1.首先我们打开浏览器,选择[工具]--[Internet选项]如下图所示: 2.打开Internet选项窗口之后选择安全选项卡,在下面点击自定义级别进入安全设置 3. ...

JavaWeb——JQuery之高级案例实战（打开网页自动弹出广告效果、抽奖效果实现）

1 打开网页自动弹出广告效果

2 抽奖效果实现

JavaWeb——JQuery之高级案例实战（打开网页自动弹出广告效果、抽奖效果实现）相关推荐

最新文章

热门文章