天天看點
傳回

js實作toast輕提示功能（純原生）

參考一：根據提示内容進行自動消失的輕提示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      @keyframes show {
          0% {
              opacity: 0;
          }
                 
          100% {
              opacity: 1;
          }            
      }
      
      @keyframes hide {
          0% {
              opacity: 1;
          }
             
          100% {
              opacity: 0;
          }
      } 
      
      .toast_box {
          /* width: 100%; */
          position: absolute;
          bottom: 50%;
        left: 50%;
          /* justify-content: center; */
        z-index: 10;
        transform: translate(-50%, -50%);
          display: none;
      }
             
      .toast_box p {
          box-sizing: border-box;
          padding: 10px 20px;
          width: max-content;
        /* 提示框的背景色 */
          background: #707070;
          color: #fff;
          font-size: 16px;
          text-align: center;
          border-radius: 6px;
          opacity: 0.8;
      } 
      
      .toliet{
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="hotal">
      <!-- 提示框 -->
      <div class="toast_box">
          <p id="toast"></p>
      </div>
      <button id="toliet" type="button" onclick="correct()">正常</button>
      <button id="toliet" type="button" onclick="warning()">警告</button>
      <button id="toliet" type="button" onclick="error()">報錯異常</button>
    </div>
    <script type="text/javascript">
      //形參分别是: 提示内容,停留時間時間
      function toast(text, time) {
          let toast = document.getElementById('toast');
          let toast_box = document.getElementsByClassName('toast_box')[0];
          toast.innerHTML = text;
          toast_box.style.animation = 'show 1.5s'
          toast_box.style.display = 'inline-block';
        setTimeout(function(){
          toast_box.style.animation = 'hide 1.5s'
          setTimeout(function(){
            toast_box.style.display = 'none';
          }, 1400)
        }, time)   
      }
      
      //調用
      function correct(){
        toast("is ok!",5000);
      }
      
      function warning(){
        toast("異常提醒",3000);
      }
      
      function error(){
        toast("報錯",3000);
      }
      
    </script>
  </body>
</html>

效果：

(1)正常

js實作toast輕提示功能（純原生）

（2）提醒

js實作toast輕提示功能（純原生）

（3）錯誤

js實作toast輕提示功能（純原生）

當你看到這種提示顔色的時候你能記得住剛剛彈出了啥提示不？？

參考二：根據提示内容和提示的字型顔色、背景色進行提示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      @keyframes show {
          0% {
              opacity: 0;
          }
                 
          100% {
              opacity: 1;
          }            
      }
      
      @keyframes hide {
          0% {
              opacity: 1;
          }
             
          100% {
              opacity: 0;
          }
      } 
      
      .toast_box {
          /* width: 100%; */
          position: absolute;
          bottom: 50%;
        left: 50%;
          /* justify-content: center; */
        z-index: 10;
        transform: translate(-50%, -50%);
          display: none;
      }
             
      .toast_box p {
          box-sizing: border-box;
          padding: 10px 20px;
          width: max-content;
        /* 提示框的背景色 */
          background: #707070;
          color: #fff;
          font-size: 16px;
          text-align: center;
          border-radius: 6px;
          opacity: 0.8;
      } 
      
      .toliet{
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="hotal">
      <!-- 提示框 -->
      <div class="toast_box">
          <p id="toast"></p>
      </div>
      <button id="toliet" type="button" onclick="correct()">正常</button>
      <button id="toliet" type="button" onclick="warning()">警告</button>
      <button id="toliet" type="button" onclick="error()">報錯異常</button>
    </div>
    <script type="text/javascript">
      //形參分别是: 提示内容,時間,背景色,字型顔色
      function toast(text, time,bgcolor,color) {
          let toast = document.getElementById('toast');
          let toast_box = document.getElementsByClassName('toast_box')[0];
          toast.innerHTML = text;
        toast.style.background = bgcolor;
        toast.style.color = color;
          toast_box.style.animation = 'show 1.5s'
          toast_box.style.display = 'inline-block';
        setTimeout(function(){
          toast_box.style.animation = 'hide 1.5s'
          setTimeout(function(){
            toast_box.style.display = 'none';
          }, 1400)
        }, time)   
      }
      
      //調用
      function correct(){
        toast("is ok!",5000,"#00CC00","#FFFFFF");
      }
      
      function warning(){
        toast("異常提醒",5000,"#FF6600","#FFFFFF");
      }
      
      function error(){
        toast("報錯",5000,"#CC0000","#FFFFFF");
      }
      
    </script>
  </body>
</html>

效果：

（1）正常：

js實作toast輕提示功能（純原生）

（2）警告

javascript css3 css html 提示框
上一篇: 全面解析Arrays.sort——JDK源碼解析一. 簡介 二. 源碼解析
下一篇: jdk1.6源碼學習---ConCurrentHashMap

繼續閱讀