js实现广告弹窗

2022/4/20 6:13:39

编程Tag： js 弹窗 style 广告 color span display right adver

本文主要是介绍js实现广告弹窗，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

这篇关于js实现广告弹窗的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

js实现广告弹窗

相关编程文章