javascript实现倒计时关闭广告


Posted in Javascript onFebruary 09, 2021

用Javascript实现倒计时关闭广告案例

正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教

在很多app与网页中,我们可以看到这样的广告:进入某个网站后,会弹出一个广告,然后广告会有倒计时,倒计时结束,这个广告便会消失,下面我们用代码来实现这一功能

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 .djs{
 width: 30px;
 height: 30px;
 position: absolute;
 left: 700px;
 color: white;
 background-color: darkred;
 }
 .end{
 display: none;
 }
 </style>
</head>
<body>
<div class="djs"></div>
<img class="ad" src="../images/1.png" alt="">
<div class="end">广告已结束</div>
<script>
 //5秒关闭广告
 var ad=document.querySelector('.ad')
 var div=document.querySelector('.djs')
 var end=document.querySelector('.end')
 var t=5
 fun()
 setInterval(fun,1000)
 function fun() {
 div.innerHTML=t
 if (t==0){
 ad.style.display='none'
 div.style.display='none'
 end.style.display='block'
 }
 t--
 }
</script>
</body>
</html>

演示效果:

javascript实现倒计时关闭广告

右上角便是倒计时

javascript实现倒计时关闭广告

javascript实现倒计时关闭广告

代码解释:

这里就是先创建个函数,设置个全局变量t,然后t就是倒计时的时间,我们在倒计时函数里面将div里面显示的文字改为我们的倒计时t,然后来判断t是否等于0,如果等于0,那么倒计时结束,将图片与倒计时盒子隐藏,显示广告已结束的盒子。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
es6数值的扩展方法
Mar 11 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
vue+elementUI 实现内容区域高度自适应的示例
Sep 26 Javascript
JavaScript文档对象模型DOM
Nov 20 Javascript
javascript实现固定侧边栏
Feb 09 #Javascript
JavaScript实现前端倒计时效果
Feb 09 #Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 #Vue.js
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 #Javascript
详解Vue的七种传值方式
Feb 08 #Vue.js
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 #Javascript
js 执行上下文和作用域的相关总结
Feb 08 #Javascript
You might like
PHP获取网站域名和地址的代码
2008/08/17 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
Python 专题一 函数的基础知识
2017/03/16 Python
Django 路由控制的实现代码
2018/11/08 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
在家更换处方镜片:Lensabl
2019/05/01 全球购物
PHP如何自定义函数
2016/09/16 面试题
化工专业应届生求职信
2013/11/08 职场文书
银行开业庆典方案
2014/02/06 职场文书
教师职称自我鉴定
2014/02/12 职场文书
建议书怎么写
2014/03/12 职场文书
党员教师工作决心书
2014/03/13 职场文书
合作意向协议书范本
2014/03/31 职场文书
中班开学寄语
2014/04/04 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
Python matplotlib多个子图绘制整合
2022/04/13 Python