javascript实现倒计时提示框


Posted in Javascript onMarch 02, 2021

本文实例为大家分享了javascript实现倒计时提示框的具体代码,供大家参考,具体内容如下

javascript实现倒计时提示框

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>全屏提示框</title>
 <style>
  #button{
   width: 150px;
   height: 50px;
   background-color: greenyellow;
  }
  .fullScreenDiv{/* 全屏div */
   display: none;
   position: absolute;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
  }
  .promptDiv{/* 提示框div */
   display: none;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   width: 30%;
   height: 30%;
   border-radius: 20px;
   background-color:white;
   text-align: center;
  }
  .close{
   height: 34px;
   line-height: 34px;
   margin: 0px;
   text-align: right;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   background-color: cornflowerblue
  }
  .X{
   padding: 2px 6px;
   margin-right: 8px;
   color: white;
   cursor: pointer;
  }
  .countDown{/*倒计时关闭提示框*/
   color: red;
   font-size: 28px;
  }
 </style>
 <script>
  window.onload=function(){
   document.getElementById("button").addEventListener("click",function(){
    document.getElementsByClassName("fullScreenDiv")[0].style.display="block";
    document.getElementsByClassName("promptDiv")[0].style.display="block";
     for(var i=5;i>=0;i--){
      (function(i){
       setTimeout(function(){
       var j=Math.abs(i-5);//如果i为0,那么被定时0s,则要输出abs(0-5)=5 ,如果i为5,那么被定时5s,则要输出abs(i-5)=0   
       if(j==0){
   document.getElementsByClassName("fullScreenDiv")[0].style.display="none";
        document.getElementsByClassName("promptDiv")[0].style.display="none";
        }else{
        document.getElementsByClassName("countDown")[0].innerHTML=j;
        }  
        },i*1000);//每次间隔时间为1s
       })(i); 
      }
    });
     document.getElementsByClassName("X")[0].addEventListener("click",function(){
      document.getElementsByClassName("fullScreenDiv")[0].style.display="none";
      document.getElementsByClassName("promptDiv")[0].style.display="none";
     }); 
  }
 </script>
</head>
<body>
 <div>
  <button id="button">打开全屏提示框</button>
 </div>
 <div class="fullScreenDiv">
  <div class="promptDiv">
   <h4 class="close"><span class="X">X</span></h4>
    <p>我是全屏提示框我是全屏提示框我是全屏提示框</p>
    <p>倒计时关闭</p>
    <span class="countDown">5</span>
  </div>
 </div>
</body>
</html>

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

Javascript 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
window.open()弹出居中的窗口
Feb 01 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
vue-cli中实现响应式布局的方法
Mar 02 #Vue.js
JavaScript实现筛选数组
Mar 02 #Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 #Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 #jQuery
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 #Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 #Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 #Vue.js
You might like
COM in PHP (winows only)
2006/10/09 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
分享3个php获取日历的函数
2015/09/25 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
Ajax::prototype 源码解读
2007/01/22 Javascript
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
python轻松实现代码编码格式转换
2015/03/26 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
Python 里最强的地图绘制神器
2021/03/01 Python
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
中学生团员自我评价分享
2013/12/07 职场文书
门卫班长岗位职责
2013/12/15 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript