js 面向对象编程

 1 <div class="notice" id="noticeBox">
 2   <div class="close-btn" title="关闭">
 3       <svg t="1574043429318" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5339" width="10" height="10"><path d="M583.168 523.776L958.464 148.48c18.944-18.944 18.944-50.176 0-69.12l-2.048-2.048c-18.944-18.944-50.176-18.944-69.12 0L512 453.12 136.704 77.312c-18.944-18.944-50.176-18.944-69.12 0l-2.048 2.048c-19.456 18.944-19.456 50.176 0 69.12l375.296 375.296L65.536 899.072c-18.944 18.944-18.944 50.176 0 69.12l2.048 2.048c18.944 18.944 50.176 18.944 69.12 0L512 594.944 887.296 970.24c18.944 18.944 50.176 18.944 69.12 0l2.048-2.048c18.944-18.944 18.944-50.176 0-69.12L583.168 523.776z" fill="#8a8a8a" p-id="5340"></path></svg>
 4   </div>
 5   <div class="text"></div>
 6   <div class="margin-t-30 text-right" id="confirm-btn" style="display: none;"> 
 7     <button type="button" onclick="closeBox()" class="btn btn-white color-grey">取消</button> 
 8     <button type="button" id="confirmBtn" onclick="loginOut()" class="btn btn-orange">确认</button>
 9   </div>
10 </div>

js 面向对象编程

 1  function Notice(){
 2     this.status = "";
 3     this.tipText = "";
 4     this.confirmText = "确定";
 5     this.timer = null;
 6   }
 7   Notice.prototype.confirm = function (status,tipText,confirmText,callback){
 8     clearTimeout(this.timer);
 9     this.confirmText = confirmText;
10     $($("#confirm-btn button")[1]).text(`${this.confirmText}`);
11     $("#confirm-btn").show();
12     this.updateNotice(status,tipText,true);
13   }
14   Notice.prototype.updateNotice = function(status,tipText,isStop){
15     this.status = status;
16     this.tipText = tipText;
17     $("#noticeBox").addClass(`${this.status}`).css("top","200px").css("opacity","1").find(".text").text(`${this.tipText}`);
18     if(!isStop){
19       this.autoClose()
20     }
21   }
22   Notice.prototype.autoClose = function(){
23     this.timer = setTimeout(()=>{
24       this.closeBox();
25     },6000)
26   }
27   Notice.prototype.closeBox = function(){
28     $("#noticeBox").css("opacity","0").css("top","-999px").removeClass(`${this.status}`);
29     $("#confirm-btn").hide();
30   }
31   let notice = new Notice();
32   $(document).on("click","#noticeBox .close-btn",function(){
33     notice.closeBox();
34   })

 1 .notice{
 2   position: fixed;
 3   /* top: 200px; */
 4   background-color: #fff;
 5   top: -999px;
 6   left: 50%;
 7   margin-left: -125px;
 8   z-index: 9999;
 9   padding: 20px;
10   border-radius: 4px;
11   width: 250px;
12   opacity: 0;
13   color: #333;
14   transform: scale(1);
15   transition: all 1.5s ease-in-out;
16   border: 1px solid #ffa066;
17 }
18 .notice.notice-success{
19   color: #4CAF50;
20 }
21 .notice.notice-error{
22   color: #f43636;
23 }
24 .notice.notice-info{
25   color: #2196F3;
26 }
27 .notice.notice-warning{
28   color: #FF9800;
29 }
30 .notice .text{
31   text-align: left;
32 }
33 .notice .close-btn{
34   position: absolute;
35   top: 0;
36   right: 0;
37   width: 20px;
38   height: 20px;
39   text-align: center;
40   cursor:pointer;
41 }