倒计时广告关闭案例实现 js js小技巧

效果

做这个背景缘由

看 pink 老师的视频时候讲到了 5秒之后自动关闭，然后弹幕有句话就说怎么做倒计时的广告呢，然后就花了10多分钟写了一下，东西不难，大盒子套小盒子，图片当成背景图片，全填充，相对位置的简单试错。

代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#bigbox {width: 500px;height: 500px;background: url(image/img5.jpg) no-repeat;margin: 10px auto;/* 横轴居中 */background-size: 100% 100%;  /*背景图充满盒子*/color: white;}#left {float: left;margin-left: 10px;margin-top: 5px;}#right {float: right;display: none;margin-right: 10px;margin-top: 5px;}.close {cursor: pointer;}</style>
</head><body><div id="bigbox"><div><span id="left">剩余 <span id="time">5</span> S</span><span id="right" class="close">X关闭</span></div></div><script type="text/javascript">var time = document.getElementById("time");var realtime = time.innerHTML;var close = document.querySelector('.close');var bigBox = document.getElementById("bigbox");//设置定时器 多次触发，所以用 setIntervalvar timer = setInterval(daojishi, 1000);function daojishi(){realtime--;time.innerHTML = realtime;if (realtime <= 0) {close.style.display = 'block';// clearTimeout(timer);   //虽然可以混用，但是不建议，会造成歧义clearInterval(timer);}}//关闭按钮事件close.onclick = function () {bigBox.style.display = 'none';}</script>
</body></html>

倒计时广告关闭案例实现 js js小技巧相关推荐

web开发常用js功能性小技巧(转)
web开发常用js功能性小技巧 -------------------------------------------------------------------------------- < ...
JS变异小技巧：使用JavaScript全局变量绕过XSS过滤器
什么是JavaScript全局变量? JavaScript全局变量在函数外部声明或使用window对象声明,它可以通过任何函数访问. 假设你的目标Web应用程序容易受到映射到JavaScript字符串 ...
分享 28 个你应该知道的JS 实用小技巧
文 | https://niemvuilaptrinh.medium.com/28-tip-javascript-you-should-know-5c8ca83e4f99 今天我将分享一些Javasc ...
chrome调试js的小技巧
原文链接:http://www.cnblogs.com/liyunhua/p/4621937.html $ $_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变 ...
[生态建设] - js判断小技巧
0.参考说明: 从几个易得的点出发,逐步向外扩展延申,保证代码的可靠性 1.判断是否为某个类型 // 判断是否为 null const isNull = o => {return o === ...
在地址栏调试js（小技巧）
还真才学到 javascript:eval('debugger;Myfunction()') javascript:alert(eval('debugger;Myfunction()')) 转载于:h ...
简历制作案例分析及制作小技巧总结
零.简历样例展示第一份第二份第三份第四份一. 简历案例问题分析第一份内容字体一致,应突出重点教学经历写到本科以上(不写初中高中) 实践经历应逻辑明确 ,应突出自己真正做的事第二份居 ...
layer 关闭一个弹窗打不开新的的弹窗_电脑小技巧关闭FF弹窗
电脑小技巧--电脑做无线热点电脑小技巧--U盘坏了如何修复电脑小技巧--自动维护计划.任务关闭.禁用电脑小技巧--预防U盘中毒电脑小技巧--提高U盘读写速度电脑小技巧--调整引导高级选项加快 ...
【小技巧】广告弹窗——ff新推荐
前言:一些解决流氓弹窗.广告.挖矿等问题的小技巧. 环境:win10. 均为本人搜索.总结出来的一些简单方法. 计算机小白,如有问题请及时提出,见谅. 侵删. Flash助手,虽然我也不清楚这东西 ...

倒计时广告关闭案例实现 js js小技巧

效果

做这个背景缘由

代码

倒计时广告关闭案例实现 js js小技巧相关推荐

最新文章

热门文章