前端简单入门第九讲 使用JavaScript实现定时弹出广告定时隐藏广告
发布日期:2021-06-30 18:00:40
浏览次数:3
分类:技术文章
本文共 2478 字,大约阅读时间需要 8 分钟。
使用JavaScript实现定时弹出广告定时隐藏广告
现在有这样一个需求:在网站的首页上定时弹出一个广告,并且定时隐藏掉。若要实现这个需求,则必须理解BOM(浏览器对象模型)中的Window对象的定时的操作:
- 设置定时的方法
- 清除定时的方法
除此之外,还要知道CSS中的一个显示和隐藏的属性——display,其值有
- block:显示元素
- none:隐藏元素
下面我就按如下步骤来使用JavaScript实现定时弹出广告和定时隐藏的效果:
- 创建一个【使用JS定时弹出广告.html】页面;
- 确定页面的加载事件——onload事件;
- 触发一个函数,编写该函数;
- 在函数中设置定时操作,定时执行一个页面加载5秒之后显示广告的函数;
- 清空定时,重新设置定时,5秒钟后隐藏广告。
我提供的【使用JS定时弹出广告.html】页面的内容如下:
首页
在代表logo的div上面加上如下一个div:
一开始就让其隐藏掉。接着就要编写JavaScript代码实现定时弹出广告定时隐藏广告,直接贴出代码:
在Firefox浏览器上运行该页面,即可达到该效果,在此并不演示,读者可自行测试。
上文讲解了使用JavaScript完成图片轮播的效果,这里也可以将这两个效果一并实现之。那么核心的JavaScript代码就为:读者如需完整代码,可参考!
总结
JavaScript中的BOM对象
JavaScript中的BOM对象有:
下面我稍微提一下这些对象。Window
Window对象表示浏览器中打开的窗口。我们只须注意一下其属性和方法即可。
Window对象的属性: 可见BOM对象中的其他对象,例如history、location、Navigator和Screen就是Window对象的属性。 Window对象的方法: 较常用的方法我也用红框框起来了。Navigator
Navigator对象包含有关浏览器的信息。我们只须注意一下其属性即可。
Navigator对象的属性:Screen
Screen对象包含有关客户端显示屏幕的信息。我们只须注意一下其属性即可。
Screen对象的属性:History
History对象包含用户(在浏览器窗口中)访问过的URL。我们只须注意一下其方法即可。
History对象的方法: 使用比较多的就是go()方法了,history.back();
等价于history.go(-1);
。 Location
Location对象包含有关当前URL的信息。我们只须注意一下其属性即可。
Location对象的属性: 使用比较多的是href属性,常用它进行跳转页面。例如,有如下一个按钮:点击它要跳转到一个页面中去,可编写如下的JavaScript代码:
转载地址:https://liayun.blog.csdn.net/article/details/70880839 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
表示我来过!
[***.240.166.169]2024年04月18日 05时23分53秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
POJ - 2481 Cows (树状数组 入门题)
2019-04-30
ACM-ICPC 2018 焦作赛区网络预赛 I. Save the Room
2019-04-30
CodeForces - 987C Three displays (暴力/dp)
2019-04-30
计蒜客 NAIPC 2016 F. Mountain Scenes(dp)
2019-04-30
牛客国庆集训派对Day4——I 连通块计数(思维)
2019-04-30
牛客国庆集训派对Day4——G 区间权值(找规律,双重前缀和)
2019-04-30
牛客国庆集训派对Day5——L 数论之神(找规律/数论)
2019-04-30
CodeForces - 629B Far Relative’s Problem(模拟)
2019-04-30
CodeForces - 1059B Forgery (思维)
2019-04-30
CodeForces - 456C Boredom (dp)
2019-04-30
CodeForces - 960B Minimize the error (思维,贪心)
2019-04-30
CodeForces - 97B Superset (思维/分治/构造)
2019-04-30
CodeForces - 675A Infinite Sequence(简单数论 细节)
2019-04-30
CodeForces - 1042B Vitamins (思维)
2019-04-30
ACM 2013 长沙区域赛 Alice's Print Service (二分 思维)
2019-04-30