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中String类的replace函数
Sep 22 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
Jquery性能优化详解
May 15 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
Javascript confirm多种使用方法解析
Sep 25 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
用php+mysql一个名片库程序
2006/10/09 PHP
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
jquery插件之easing使用
2010/08/19 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
vue复合组件实现注册表单功能
2017/11/06 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
python实现sublime3的less编译插件示例
2014/04/27 Python
Python获取央视节目单的实现代码
2015/07/25 Python
Python处理Excel文件实例代码
2017/06/20 Python
python全栈知识点总结
2019/07/01 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
Django admin组件的使用
2020/10/24 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
总经理岗位职责
2013/11/09 职场文书
班级旅游计划书
2014/05/03 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
布达拉宫导游词
2015/02/02 职场文书
捐款仪式主持词
2015/07/04 职场文书
初二物理教学反思
2016/02/19 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers