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 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
使用node.js搭建服务器
May 20 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
js 毫秒转天时分秒的实例
Nov 17 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
php header Content-Type类型小结
2011/07/03 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
使用php计算排列组合的方法
2013/11/13 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
js实现扫雷源代码
2020/11/27 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
Python中pass的作用与使用教程
2020/11/13 Python
python中time.ctime()实例用法
2021/02/03 Python
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
社保转移委托书范本
2014/10/08 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
负责培养人意见
2015/06/05 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python