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 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
Javascript 数组排序详解
Oct 22 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
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
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
python多线程操作实例
2014/11/21 Python
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
生产主管岗位职责
2013/11/10 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
学前班评语大全
2014/05/04 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
主婚人致辞精选
2015/07/28 职场文书
2016年五一促销广告语
2016/01/28 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
php实例化对象的实例方法
2021/11/17 PHP
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers