需求:
- 当页面加载完,3秒后。自动显示广告
- 广告显示5秒后,自动消失。
主要是这个时间差思路太赞了
<!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> /* 需求: 1. 当页面加载完,3秒后。自动显示广告 2. 广告显示5秒后,自动消失。 */ $(function () { var timeout2 = setTimeout(function(){$("#ad").css("display","block" )},3000); //clearTimeout(timeout2); var timeout = setTimeout(function(){$("#ad").css("display","none" )},8000); // clearTimeout(timeout); }) </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>