toast提示封装

直接上代码拿走不送！
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>toast</title>
 6     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 7     <style>
 8         .toast {
 9             position: fixed;
10             top: 18%;
11             left: 50%;
12             transform: translateX(-50%);
13             padding: 10px 20px;
14             border-radius: 6px;
15             color: #fff;
16             font-size: 14px;
17             min-width: 250px;
18             text-align: center;
19             display: none;
20             z-index: 10000;
21             border:solid 1px #fff;
22         }
23 
24         .succ {
25             background: rgb(78, 164, 78);
26             display: block;
27         }
28 
29         .fail {
30             background: rgba(230, 0, 0, 0.6);
31             display: block;
32         }
33     </style>
34 </head>
35 <body>
36     <button type="button" id="btn">
37         点击
38     </button>
39      <div class="toast " style="top:8%; "></div>
40 </body>
41 <script type="text/javascript">
42     $('#btn').on("click",function(){
43         toast('事件成功', 'succ',1);
44     })
45     //toast
46     function toast(content, sName, fn) {
47         $('.toast').addClass(sName);
48         $('.toast').html(content);
49         setTimeout(() => {
50             $('.toast').removeClass(sName);
51             $('.toast').html('');
52             if (fn) {
53                 console.log(1)
54                 toast('事件失败', 'fail');
55             }
56         }, 2000);
57     }
58 </script>
59 </html>
toast提示 封装

推荐阅读

toast提示封装
