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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 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中函数的形参与实参的问题说明
2010/09/01 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
php常用文件操作函数汇总
2014/11/22 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
jquery中post方法用法实例
2014/10/21 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
微信小程序时间戳转日期的详解
2019/04/30 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
Python设计模式之观察者模式实例
2014/04/26 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
Django开发中复选框用法示例
2018/03/20 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
python实现简单文件读写函数
2021/02/25 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
广州盈通面试题
2015/12/05 面试题
shell程序中如何注释
2012/02/17 面试题
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
博士研究生自我鉴定范文
2013/12/04 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
何玥事迹观后感
2015/06/16 职场文书
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技