首页 > 其他分享> > js实现广告弹窗

js实现广告弹窗

2022-04-20 02:02:40 作者：互联网

<!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秒过后既又重新出现

标签：style,right,span,color,js,adver,广告,display,弹窗
来源： https://www.cnblogs.com/bg618/p/16168189.html