javascript實現倒計時提示框

阿新 • • 發佈：2021-03-03

本文例項為大家分享了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.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;
   bwww.cppcns.com 
order-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){
   doEABKiijLpCcument.getElementsByClassName("fullScreenDiv")[0].style.display="none";
        document.getElementwww.cppcns.comsByClassName("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>
 <divEABKiijLpC 
>
  <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實現倒計時提示框的具體程式碼，供大家參考，具體內容如下

javascript實現倒計時效果

本文例項為大家分享了javascript實現倒計時效果的具體程式碼，供大家參考，具體內容如下

js實現搜尋提示框效果

本文例項為大家分享了js實現搜尋提示框效果的具體程式碼，供大家參考，具體內容如下

JavaScript實現alert彈框效果

本文例項為大家分享了JavaScript實現alert彈框的具體程式碼，供大家參考，具體內容如下

JavaScript實現複選框全選和取消全選

JS網頁–全選和取消全選，供大家參考，具體內容如下表格，初始狀態下複選框都是未選中狀態，選中表頭的複選框後，下面幾個複選框變為選中狀態，取消表頭複選框選中狀態後，下面幾個複選框選中狀態也隨之取消；下面

Javascript實現單選框效果

本文例項為大家分享了Javascript實現單選框效果的具體程式碼，供大家參考，具體內容如下

JavaScript實現倒計時跳轉到指定頁面程式碼

技術標籤：JavaScript小作業時間顯示動態倒計時，0的時候自動跳轉到指定頁面程式碼如下

（排他思想）用Javascript實現複選框全選/反選功能

技術標籤：JScssjavascripthtml5html 用Javascript實現複選框全選/反選功能正在學習大前端中，有程式碼和思路不規範不正確的地方往多多包涵，感謝指教

用Javascript實現倒計時效果

技術標籤：JSjavascriptcsshtmlhtml5 用Javascript實現倒計時效果正在學習大前端中，有程式碼和思路不規範不正確的地方往多多包涵，感謝指教

javascript實現倒計時關閉廣告

用Javascript實現倒計時關閉廣告案例正在學習大前端中，有程式碼和思路不規範不正確的地方往多多包涵，感謝指教

JavaScript實現一個輸入框元件

本文例項為大家分享了手動實現一個輸入框元件的具體程式碼，供大家參考，具體內容如下

JavaScript實現複選框全選或全取消操作

本文例項為大家分享了 + element ui實現錨點定位的具體程式碼，供大家參考，具體內容如下

JavaScript實現模態框拖拽效果

在這裡做一個模態框拖曳的案例，在這裡要實現的功能有： 1.點選彈出層，會彈出模態框，並且顯示灰色半透明的遮擋層。

javascript 實現富文字框選中對齊

需求：一個可編輯（contenteditable=true）的div，對齊選中內容,左、中，右，其實質是：對選中的末梢節點，找到塊屬性的父元素，設定text-algin:center:

用Javascript實現點選input輸入框後輸入框的提示文字消失,並且邊框顏色發生變化（包含input框的password型別如何顯示提示文字）

技術標籤：JScsshtmljavascript 用Javascript實現點選input輸入框後輸入框的提示文字消失。並且邊框顏色發生變化（包含input框的password型別如何顯示提示文字）

javascript實現輸入框內容提示及隱藏功能

有時輸入框較小，希望輸入內容後，出現一個有放大輸入內容的提示框實現思路

JavaScript實現PC端四格密碼輸入框功能

本文例項為大家分享了JavaScript實現PC端四格密碼輸入框的具體程式碼，供大家參考，具體內容如下

jQuery實現滑鼠放置名字上顯示詳細內容氣泡提示框效果的方法分析

本文例項講述了jQuery實現滑鼠放置名字上顯示詳細內容氣泡提示框效果的方法。分享給大家供大家參考，具體如下：

Unity實現通用的資訊提示框

本文例項為大家分享了Unity實現資訊提示框的具體程式碼，供大家參考，具體內容如下

Vue + Element 實現多選框選項上限提示與限定

上圖先，看效果！！！ //vue資料夾內<el-form :model=\"form\" class=\"form-inline\"> <!-- :style=\"selectNum >= 8 || selectNum <=1 ? \'pointer-events: none;\' : \'\'\"

javascript實現倒計時提示框

相關推薦