<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .adver{ width: 300px; height: 200px; border: 1px solid #ccc; background-color: pink; position: absolute; top: 100px; right: 0; } span{ width: 40px; height: 25px; position: absolute; top: 0; right: 0; background-color: #ccc; color: #fff; text-align: center; } </style> <body> <div class="adver"> <span>關閉</span> </div> </body> <script> // 獲取操作對象 var adver = document.querySelector('.adver'); //延遲消失 // setTimeout(function(){ // // 讓div消失 // //display:none opacity:0 right:-300px // adver.style.display = 'none' // },3000) var span = document.querySelector('span'); // 給操作對象添加事件 span.onclick = function(){ // 當點擊關閉按鈕讓整個盒子隱藏 adver.style.display = 'none' // 設置延時定時器 setTimeout(function(){ adver.style.display = 'block' },3000) } </script> </html>
效果圖：點擊關閉即可隱藏 - 3秒過后既又重新出現
