广告弹出效果

自动关闭的广告

效果：

自动关闭的广告

html代码：

<style>
    #advert{
        width: 300px;
        height: 200px;
        background-color: pink;
        border: 1px solid #000;
        position:absolute;
        right:0;
        bottom: 0;
    }
    #close{
        position:absolute;
        left:0;
        top:0;
    }
</style>
<div id="advert">
    <button id="close">关闭</button>
</div>

js代码：

// 获取广告框
var advert = document.getElementById("advert");
// 3秒后自动关闭
setTimeout(function(){
    // 隐藏广告框
    advert.style.display = "none";
},1000);

关闭后自动弹出的广告

效果：

关闭后会自动弹出的广告

html代码跟上面是一样的，js代码有一点变化：

// 获取广告框
var advert = document.getElementById("advert");
// 获取关闭按钮
var closeBtn = document.querySelector('#close')
closeBtn.onclick = function(){
    // 点击就隐藏广告框
    advert.style.display = "none";
    // 定时器让广告框1秒后显示
    setTimeout(function(){
        // 显示广告框
        advert.style.display = "block";
    },1000);
}